Question

我的问题在标题中得到了很好的解释。如何在Javascript文本节点中获取HTML标记？我的代码在页面上的结果是......

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

但是，我希望“点击此处”成为一个链接。我是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>

Answer 1

您无法在文本节点中放置链接。链接是元素。元素可以（有时）包含文本节点，但反之则不然。

您需要创建一个元素，在其上设置属性，然后将文本附加到该元素。

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

Answer 2

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

Answer 3

您正在寻找document.createElement，而不是document.createTextNode。文本节点不能包含HTML。

一个简单的替代方案，如果你没有使用复杂的Javascript（你似乎不是），那就是：

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

Answer 4

我需要在文本节点的中间插入一个元素（用span替换一个单词）。我是通过完全替换文本节点来完成的：

（使用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>');

如何在Javascript文本节点中获取HTML标记？

4 个答案: