HTML - How do I insert a tag into each line of a
 block without hard coding?


Tags: javascript,jquery,html,css

Problem :

I was just trying to add line numbers at the beginning of source code using CSS. I realized the effect I wanted, as follows:

Effect implemented

However, the HTML code required continual use of <span>...</span> tags:

<pre class="code">
  <span>var links = document.getElementsByClassName("link");</span>
  <span>for(var i = 0; i &lt; links.length; i++){</span>
  <span>  links[i].onclick=function(){</span>
  <span>   alert(i+1);</span>
  <span>  };</span>
  <span>}</span>
</pre>

With the span tags positioned at home/end of lines I can let the line numbers show as expected. But I think there must be another better solution to prevent me adding all these span tags hard-coded, maybe using Javascript, or jQuery I don't mind but don't know how. Please help.

NOTE:
My problem is not how to display line numbers when the <span> tags are already there. Instead, I wanted to know if the origin HTML code contains NO <span> tags, how can I automatically add them into the suitable places and so I can apply the CSS styles.



Solution :

I have combined @Stewartside answer with what you have actually asked for.

Below you can see a simple plain JavaScript to replace any line in element with code class to be wrapped in span which applies @Stewartside css.

var codeElement = document.getElementsByClassName("code"); //array of code blocks
var formattedCode = codeElement[0].textContent.replace("\r\n", "\n").split("\n");
var codeLength = formattedCode.length;
formattedCode.forEach(function(line, index, array) {
  if (codeLength - 1 == index) return; 
  array[index] = "<span>" + line + "</span>";
});

codeElement[0].innerHTML = formattedCode.join("\n");

$(".code-jquery").each(function(index, codeElement) {
  var formattedCode = $(codeElement).html().replace("\r\n", "\n").split("\n");
  
  var codeLength = formattedCode.length;
  $(codeElement).text("");
  $.each(formattedCode, function(index, line) {
    if (codeLength - 1 == index) return;
    $(codeElement).append("<span>" + line + "</span>\n")
  });
});
pre {
  background: #eee;
  counter-reset: section; /* Reset the counter to 0 for each new pre */
}
pre span:before {
  counter-increment: section; /* Increment the section counter*/
  content: counter(section); /* Display the counter */
  padding: 0 5px;
  border-right: 1px solid #777;
  margin-right: 5px;
  color: #777
}

pre.code-jquery span {
  color: green;
}
<pre class="code">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>

//jQuery version
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre class="code-jquery">
  var links = document.getElementsByClassName("link");
  for(var i = 0; i &lt; links.length; i++) {
    links[i].onclick = function() {
    	alert(i+1);
  	};
  }
</pre>


    CSS Howto..

    How to rearrange these elements with CSS?

    How do I prevent my dropdown from closing when clicking inside it?

    html/css, how to make element padding not cover over previous elements?

    jQuery hide show id

    How to set css styles with variables in rails if certain item is selected?

    How to add custom fonts [duplicate]

    How to make triangle section separator [closed]

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to align div to the bottom of another div in HTML?

    How to use absolute position relative to parent element

    How to keep two divs and images inside them to be side by side on browser resize?

    How do I centre align two BTN button within a jumbotron in HTML

    How do you get multiple views in one window like JSFiddle does [closed]

    How do I center align form

    How to keep symmetry with CSS fluid spacing of dynamic content

    How to create vertical tabs in firefox addon?

    How can I align unsorted list horizontly ?

    How to apply css to id generated dynamically?

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    How can I add pagination to my site's gallery?

    How do you make linked text act as if it is normal text?

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    how to achieve this this horizontal line from css or bootstrap

    How to position the GWT dialog to the bottom right corner of the browser?

    How to Resize Unicode Characters via CSS

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    How can I force an image to display in its entirety with CSS?

    How to select nth sibling after specific class based on any number multiple with CSS? [duplicate]

    How to stay on selected tab after refresh?

    How to Get Element From Path Not Class or Id