create the Span element dynamically

Question

Hello I am looking for some working code to create span elements.

My text is simple each word is seperated by space.

I need to create span as follow so that I can lift the code quickly. As mention below each word has unique id as W1, W2, etc.

<p>
  <!-- I need to create span as follow so that -->
  <span id="W1">I</span>  
  <span id="W2">need</span>  
  <span id="W3">to/span>  
  <span id="W4">create</span>  
  <span id="W5">span</span>  
  <span id="W6">as</span>  
  <span id="W7">follow</span>  
  <span id="W8">so</span>  
  <span id="W9">that</span> 
</p>

Thanks.

I have MS expression web and vb studio, any tool I can keep locally and keep creating.

I see this link on web doing something.

Smells like a homework...

VisioN
– VisioN

2013-03-27 14:47:34 +00:00
Commented Mar 27, 2013 at 14:47 — VisioN
– VisioN, Commented Mar 27, 2013 at 14:47
What have you tried?

Paul Butcher
– Paul Butcher

2013-03-27 14:56:59 +00:00
Commented Mar 27, 2013 at 14:56 — Paul Butcher
– Paul Butcher, Commented Mar 27, 2013 at 14:56

Littlebobbydroptables · Accepted Answer · 2013-03-27 15:01:00Z

1

Html

<body>
    <p>
    </p>
</body>

Js

<script>
    var sString = "asdf sadfasd f sdfasd fasdfasdfasdf";
    var aString = sString.split(' ');

    for (var i=0;i<aString.length;i++)
    {
        document.getElementsByTagName("p")[0].innerHTML += '<span class="w' + i + '">' + aString[i] + '</span>'
    }
</script>

And always post your code, even if it seems to you foolish and wrong :)

answered Mar 27, 2013 at 15:01

Littlebobbydroptables

3,7419 gold badges53 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user79292 Over a year ago

Hello, Thanks for this code. I was doing this manually using some editor and putting code inside my xhtml file. I need something so that I can see generated HTML code as I showed in the example. Any help will help.

James Over a year ago

Quick and dirty: prompt("Copy n paste this", document.getElementsByTagName("p")[0].innerHTML); at the end of the above script.

Littlebobbydroptables Over a year ago

If you user firefox for browsing you can install firebug plugin, really awesome tool for a web developer

PHearst · Accepted Answer · 2013-03-27 15:12:12Z

1

// You either have a string 
var mysentence = "I need to do my homework";

// or a paragraph
<p id="words">I need to do my homework</p>
// get sentence
var mysentence = document.getElementById('words');


function spanify(sentence) {
  var arrayOfStrings = sentence.split(" "), newString = "";
    for (var i=0; i < arrayOfStrings.length; i++){
        newString += "<span id='W" + i + "'>" + arrayOfStrings[i] + "</span>";
        }
        return newString;
    }

// spanify the sentence
spanify(mysentence);

answered Mar 27, 2013 at 15:12

PHearst

7817 silver badges30 bronze badges

Collectives™ on Stack Overflow

create the Span element dynamically

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related