1

我的问题在标题中得到了很好的解释。如何在 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>
4

4 回答 4

7

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

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

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-04T20:55:13.003 回答
1 
<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-04T21:05:41.197 回答
0

你在找document.createElement，不是document.createTextNode。文本节点不能包含 HTML。

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

document.getElementById('mydiv').innerHTML.='<a href="http://www.example.com">Click Here</a>';
于 2012-06-04T20:56:03.050 回答
0

我需要在文本节点的中间插入一个元素（用跨度替换一个单词）。我通过完全替换文本节点来做到这一点：

（使用 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-01T13:18:29.680 回答