How to change an html tag with Javascript?

Question

I want to display the text from a string into an HTML tag without moving to next page and display it.

<body>
<div>
    <label id="lbl1">Label </label>
    <button id="btn1" onclick="display()">Click </button>
    <script>
    function display() {
        var str="Hello World";
        document.write(str);
    }
</script>
</div>
</body>

How do I edit the contents of the label tag?

If it's just text, you can overwrite the label's content with `var target = document.getElementById("lbl1"); while (target.firstChild) { target.removeChild(target.firstChild); } target.appendChild(document.createTextNode(str));` — Ian, Aug 30 '13 at 13:28

score 5 · Accepted Answer · answered Aug 30 '13 at 13:22

5

Common …

document.getElementById('lbl1').innerHTML = str;

answered Aug 30 '13 at 13:22

insertusernamehere

23,204
9
87
126

thanks... i was trying this way.. document.getElementById(lbl1).text=str – vishalkin Aug 30 '13 at 13:29
@Ian method in the comments is best if just wanting text. See [Security Considerations of element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML) – Xotic750 Aug 30 '13 at 13:32

score 0 · Answer 2 · answered Aug 30 '13 at 13:22

0

function display() {
    var str="Hello World";
    var label = document.getElementById('lbl1');
    label.innerHTML = str;
 }

answered Aug 30 '13 at 13:22

ragklaat

926
5
12

score 0 · Answer 3 · edited May 23 '17 at 10:25

Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:

function display() 
{
   var str="Hello World";
   return str;
}

You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.

You could also modify your display() function a little bit to get the desired result:

function display() 
{
   var str="Hello World";
   var label = document.getElementById("lbl1");
   label.innerHTML = str;
}

Another way:

window.onload = function()
{
  var button = document.getElementById("btn1");
  button.onclick = function()
  {
    document.getElementById("lbl1").innerHTML = "Hello World";
  }
}

The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.

Let's provide a complete example:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>

    <label id="lbl1">Label </label>
    <button id="btn1">Click </button>

  </body>
</html>

Then inside the JavaScript file you just register various events:

//JavaScript

window.onload = function() //You have to ensure that everything has loaded
{
  var button = document.getElementById("btn1");
  button.onclick = function()
  {
    document.getElementById("lbl1").innerHTML = "Hello World";
  }
}

It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.

score 0 · Answer 4 · edited Aug 30 '13 at 13:32

<body>
<div>
    <label id="lbl1">Label </label>
    <button id="btn1" onclick="display()">Click </button>
    <script>
    function display() {
        var str="Hello World";
        var label = document.getElementById("lbl1");
        label.innerText = str;
    }
</script>
</div>
</body>

When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".

How to change an html tag with Javascript?

4 Answers4