動態創建Span元素

你好，我正在尋找一些工作代碼來創建span元素。動態創建Span元素

我的文字很簡單，每個單詞都是由空格分隔的。

我需要創建如下的跨度，以便我可以快速解除代碼。如下所述，每個單詞都有唯一的ID，如W1，W2等。

<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>

謝謝。

我有MS表達網絡和VB工作室，任何工具，我可以保持本地和不斷創建。

I see this link on web doing something.

來源

2013-03-27 user79292

聞起來像作業... – VisioN 2013-03-27 14:47:34

[你有什麼嘗試]（http://whathaveyoutried.com）？ – 2013-03-27 14:56:59

的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>

而且總是發佈您的代碼，即使它看起來你錯誤愚蠢的:)

來源

2013-03-27 15:01:00 MyMomSaysIamSpecial

你好，感謝這個代碼。我正在使用一些編輯器手動執行此操作，並將代碼放入我的xhtml文件中。我需要一些東西，以便我可以看到生成的HTML代碼，如示例中所示。任何幫助將有所幫助。 – user79292 2013-03-27 15:23:14

快速和骯髒：'提示（「複製n粘貼這個」，document.getElementsByTagName（「p」）[0] .innerHTML）;'在上述腳本的末尾。 – James 2013-03-27 15:53:38

如果你使用firefox進行瀏覽，你可以安裝firebug插件，對於web開發者來說真的很棒 – MyMomSaysIamSpecial 2013-03-29 11:41:58

// 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);

來源

2013-03-27 15:12:12 PHearst

動態創建Span元素

回答

相關問題