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 resolve background-image url inside css file while using azure blob storage

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    How to hide first level span element by CSS “>” selector

    How I can replace an existing html val with a value calculated later using html and/or css?

    How can Shake FilePatterns be used to minify JS and CSS files?

    How do I remove the gap between div tags?

    How to combine this css?

    How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

    How to adjust progress bar with Jquery?

    How do I make part of a style element a function? (IE: color:$random instead of color:red)

    How to re-size a box with CSS or Javascript

    How to add external css into html

    How can I add specific css id to parent menu with php or javascript

    How to get the perticluar image from large set images in one image using css

    How to use pure CSS to show an animation of one element's background and color property?

    How to center modal window in css+html?

    How to center a text line in a navigation bar?

    How to put Logo & navigation in one line

    Show X and Y coordinates?

    How to target table with ID?

    How to apply css to a dynamically created div?

    how to position an element right below an “absolute” div?

    How to edit and see live CSS effect in IE8 like we see in Firefox > Web developer toolbar > Edit CSS function?

    How to style a parent element when the mouse is over a child element?

    How do I use Controller specific stylesheets in Rails 3.2.1?

    How can I control my

    styling in another styling?

    How to make Block Container with Inline-Block Child in CSS

    How to put multiple Bootstrap inputs on same line?

    How to pass a local file name to css-validator.jar?

    How to create multicolored circle in css