How do I get HTML tags inside of a Javascript Text Node?

Question

my question was pretty much explained up in the title. How do I get HTML tags inside of a Javascript Text Node? The result of my code on the page is...

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

However, I want "Click Here" to be a link. I am new to Javascript, so this would help me out a lot. Below is an example of what I'm talking about...

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

Just to convince you that jQuery is worth checking out... this is incredibly easy with jQuery (or similar libraries): $('#mydiv').append('<a href="...">...</a>'); – as Quentin's answer shows, it's quite a bit more complicated with plain DOM. — Jan Krüger
– Jan Krüger, Commented Jun 4, 2012 at 20:56

Quentin · Accepted Answer · 2012-06-04 20:55:13Z

7

You can't put links in a text node. Links are elements. Elements can (sometimes) contain text nodes, but the reverse is not true.

You need to create an element, set attributes on it, then append text to that element.

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

answered Jun 4, 2012 at 20:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sabreok Over a year ago

Wow, this was my first question on Stack Overflow and I got a great answer super fast. I guess this is goodbye to Yahoo Answers...

Tim Down Over a year ago

Given that the OP is new to JavaScript, I'd encourage using the href property rather than setAttribute(), which is broken in older IE and almost always unnecessary.

David Thomas · Accepted Answer · 2012-06-04 21:08:23Z

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>

edited Jun 4, 2012 at 21:08

David Thomas

254k53 gold badges382 silver badges421 bronze badges

answered Jun 4, 2012 at 21:05

mari

2341 silver badge5 bronze badges

1 Comment

David Thomas Over a year ago

Welcome to Stack Overflow! Please remember that you're absolutely okay to post answers to answered questions; but please consider taking a read of the mark-down editing pages for how to show code in your answers.

Death · Accepted Answer · 2012-06-04 20:56:03Z

0

You're looking for document.createElement, not document.createTextNode. Text-nodes cannot contain HTML.

An easy alternative, if you're not using complex Javascript (which it seems you aren't) would just be:

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

answered Jun 4, 2012 at 20:56

Death

2,01713 silver badges14 bronze badges

2 Comments

Jan Krüger Over a year ago

Modifying innerHTML is risky because it will likely break all event handlers tied to existing child elements of 'mydiv'.

nnnnnn Over a year ago

Or .innerHTML += ... given that the OP was trying to append. (And bearing in mind what Jan said.)

Sebastián Grignoli · Accepted Answer · 2014-11-01 13:26:25Z

I needed to insert an element in the middle of a text node (replace a word with a span). I did it by replacing the text node altogether:

(uses 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, "\\$&");
}

And then calling:

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

Or simply:

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

Collectives™ on Stack Overflow

How do I get HTML tags inside of a Javascript Text Node?

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related