Skip to content Skip to sidebar Skip to footer

Change Element Text Without JQuery?

I am trying to change the contents of a div without using jQuery. I want to select the div by id or class. Ive managed to get append to work: function appendHtml(targetC, htmldata)

Solution 1:

see this fiddle for a basic sample

<html>
<head>
<script>
    function bold(targetC) {
        var theDiv = document.getElementById(targetC);
        theDiv.innerHTML = '<b>' + theDiv.innerHTML + '</b>';
    }
</script>
</head>

<body onload='bold("message")'>
   <div>Hello, World!</div>
   <div id="message">What a nice day!</div>
</body>
</html>

Solution 2:

Edited:

<div id="foo">old text</div>   

The JS code:

function appendHtml(targetC, htmldata) {
    var theDiv = document.getElementById(targetC);
    theDiv.innerHTML = htmldata;
}

appendHtml('foo', 'new text');

Here is a fiddle: http://jsfiddle.net/7QjcB/


Solution 3:

simply change the html of a div by using innerHTML

var anyDiv = document.getElementById(targetID);

html = "content";
anydiv.innerHTML(html);

as a variation of your provided function:

function changeHtml(targetC, htmldata) {
    var theDiv = document.getElementById(targetC);
    theDIV.innerHTML = htmldata;

}


Solution 4:

Here is a fiddle that might answer your question. All I changed was getting the element before and then passing it in.

function appendHtml(targetC, htmldata) {
var newNode = document.createElement('div');
newNode.innerHTML = htmldata;
targetC.appendChild(newNode);
}

var getDiv = document.getElementById("testing");

Post a Comment for "Change Element Text Without JQuery?"