JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div class="comments_list " id="comments">

  <h2 class="title ">комментарии (<span id="comments_count">78</span>)
  		<span class="subscribe_comments">
			отслеживать новые: 
			<label><input type="checkbox" id="subscribe_comments" rel="{target_type:'2',target_id:189852 }"> в почте</label>
			<label><input type="checkbox" id="tracker_comments" rel="{target_type:'2',target_id:189852 }"> в трекере</label>
		</span>

  </h2>

    <div class="comment_item" id="comment_6592220">
	
	<span class="parent_id" data-parent_id="0"></span>
	<div class="comment_body">
			<div class="info " rel="6592220">
				<div class="folding-dot-holder"><div class="folding-dot"></div></div>
				<div id="voting_6592220" class="voting   ">
						<a href="#minus" class="minus" title="Не нравится" onclick="return comments_vote(this, 6592220, '3',	189852, -1)"></a>
						<a href="#plus" class="plus" title="Нравится" onclick="return comments_vote(this, 6592220, '3',	 189852, 1)"></a>
					<div class="mark positive ">
							<span class="score" title="Всего 20: ↑14 и ↓6">+8</span> 
					</div>	 
				</div>
				<a href="http://habrahabr.ru/users/edogs/" class="avatar"><img src="http://habrahabr.ru/i/avatars/stub-user-small.gif" alt=""></a>
				<a href="http://habrahabr.ru/users/edogs/" class="username">edogs</a><span class="comma">,</span>
				<time>12 августа 2013 в 19:26</time>
				
				<a href="#comment_6592220" class="link_to_comment">#</a>
					<a href="#" class="favorite add" onclick="return comments_add_to_favorite(this, '3', 6592220 )" title="В избранное"></a>
				<span class="to_chidren"></span>
				<div class="clear"></div>
			</div>
			<div class="message html_format ">
				Идея-то хорошая, но эпик фэил ее в том, что есть сильная неоднозначность. Чем хорош «ненатуральный» язык, так это своей однозначностью. <br>
^ намного проще запомнить чем startOfLine и есть уверенность, что не напишешь<br>
<pre><code class="javascript"><span class="keyword">var</span> tester = VerEx()
           ...

JavaScript

/* Create a button ( span > a ) */
function createBtn (className, value, btnClass, containerClass, onclick) {
    className = className || '';
    value = value || '';
    onclick = onclick || function (event) {};

    var newContainer = document.createElement('span');
        newContainer.className = containerClass;
    var newBtn = document.createElement('a');
        newBtn.className = className + btnClass;
        newBtn.appendChild(document.createTextNode(value));
        newBtn.href="#";
        newBtn.onclick = onclick;
        newContainer.appendChild(newBtn);
    return newContainer;
}

function clickPm(event) { 
        event.preventDefault();
        var username = (event.target || event.srcElement).previousElementSibling.innerText;
        alert(window.location.pathname = '/conversations/' + username);
}

    
    /* Add private message button */
    
    var infobars = document.querySelectorAll('.info');
    var usernames = document.querySelectorAll('.info > .username');
    
    for (i = 0; i < infobars.length; i++) {
    var pmLink = createBtn('pmlink', 'send message', ' reply_link', 'container', clickPm);

    infobars[i].appendChild(pmLink);
    }