如何獲取Javascript文本節點內的HTML標籤？

我的問題在標題中有很多解釋。如何獲得Javascript文本節點內的HTML標籤？我的代碼在頁面上的結果是...如何獲取Javascript文本節點內的HTML標籤？

<a href="http://www.example.com">Click Here</a>

但是，我希望「Click Here」成爲一個鏈接。我是Javascript新手，所以這會幫助我很多。以下是我正在談論的一個示例...

<div id="mydiv"> 
</div> 
<script type="text/javascript"> 
var mynode=document.createTextNode('<a href="http://www.example.com">Click Here</a>'); 
document.getElementById('mydiv').appendChild(mynode); 
</script>

來源

2012-06-04 Sabreok

只是爲了說服你， jQuery值得一試...... jQuery（或類似庫）非常簡單：'$（'＃mydiv'）。append（'...'）;'作爲昆汀的回答表明，它與普通的DOM相當多複雜。 –

您不能將鏈接放在文本節點中。鏈接是元素。元素可以（有時）包含文本節點，但反過來並不正確。

您需要創建一個元素，在其上設置屬性，然後將文本追加到該元素。

var link = document.createElement('a'); 
link.setAttribute('href', 'http://www.example.com'); 
link.appendChild(document.createTextNode('Click Here')); 
document.getElementById('mydiv').appendChild(link);

來源

2012-06-04 20:55:13 Quentin

哇，這是我在Stack Overflow上的第一個問題，我得到了一個超級快速的好回答。我想這是告別雅虎答案... – Sabreok

鑑於OP是JavaScript的新手，我鼓勵使用'href'屬性而不是'setAttribute（）'，這在早期的IE中被破解並且幾乎總是不必要的。 –

您正在尋找document.createElement，不document.createTextNode。文本節點不能包含HTML。

一個很不錯的選擇，如果你不使用複雜的JavaScript（這好像你是不是），也只是：

document.getElementById('mydiv').innerHTML.='<a href="http://www.example.com">Click Here</a>';

來源

2012-06-04 20:56:03 Death

修改innerHTML是有風險的，因爲它可能會破壞所有與'mydiv'的現有子元素綁定的事件處理程序。 –

或'.innerHTML + = ...'鑑於OP正試圖追加。（並且銘記Jan說什麼。） – nnnnnn

<div id="mydiv"> 
</div> 

<script type="text/javascript"> 

    var element = document.createElement('a'); 
    element.setAttribute("href","http://www.example.com"); 
    element.appendChild(document.createTextNode('Click Here')); 
    document.getElementById('mydiv').appendChild(element); </script> 

</script>

來源

2012-06-04 21:05:41 mari

Ups，沒有看到它已經被回答了。 – mari

歡迎來到Stack Overflow！請記住，您*完全*可以發佈回答問題的答案;但請考慮閱讀[標記編輯頁面]（http://stackoverflow.com/editing-help）以瞭解如何在答案中顯示代碼。 –

我需要的中間插入元素文本節點（用跨度替換一個單詞）。我做到了通過更換完全文本節點：

（使用jQuery的）

function replace_text(element, search, replacement_html){ 
    if(!element) element=document.body; 
    var nodes=element.childNodes; 
    for(var n=0;n<nodes.length;n++){ 
    if(nodes[n].nodeType==Node.TEXT_NODE){ 
     if(nodes[n].textContent.match(new RegExp(that.escapeRegExp(search),'gi'))){ 
     var newtextContent=nodes[n].textContent.replace(
       new RegExp(escape_regex(search),'gi'), replacement_html); 
     $(nodes[n]).before(newtextContent).remove(); 
     } 
    } else { 
     replace_text(nodes[n], search, replacement_html); 
    } 
    } 
} 

function escape_regex(str) { 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
}

，然後調用：

$('.highlight_terms_here').each(function(){ 
    replace_text(this, 
       the_word, 
       '<span style="background-color: yellow">'+the_word+'</span>'); 
})

或者乾脆：

replace_text($('#contents')[0], the_word, 
       '<span style="background-color: yellow">'+the_word+'</span>');

來源

2014-11-01 13:18:29

如何獲取Javascript文本節點內的HTML標籤？

回答

相關問題