Как получить HTML-теги внутри текстового узла Javascript?

Question

мой вопрос был в значительной степени объяснен в заголовке. Как получить HTML-теги внутри текстового узла Javascript? Результат моего кода на странице ...

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

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

Вы ищете document.createElement, не document.createTextNode. Текстовые узлы не могут содержать HTML.

Простая альтернатива, если вы не используете сложные Javascript (который, кажется, вы не) будет просто:

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

Answer 3

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

мне нужно, чтобы вставить элемент в середину текстовый узел (замените слово слоем). Я сделал это, заменив текстовый узел в целом:

(использует 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>');