you can use following helper function:
function content[divSelector, value] {
document.querySelector[divSelector].innerHTML = value;
}
content['#content',"whatever"];
Where #content
must be valid CSS selector
Here is working example.
Additionaly - today [2018.07.01] I made speed comparison for jquery and pure js solutions [ MacOs High Sierra 10.13.3 on Chrome 67.0.3396.99 [64-bit], Safari 11.0.3 [13604.5.6], Firefox 59.0.2 [64-bit] ]:
document.getElementById["content"].innerHTML = "whatever"; // pure JS
$['#content'].html['whatever']; // jQuery
The jquery solution was slower than pure js solution: 69% on firefox, 61% on safari, 56% on chrome. The fastest browser for pure js was firefox with 560M operations per second, the second was safari 426M, and slowest was chrome 122M.
So the winners are pure js and firefox [3x faster than chrome!]
You can test it in your machine: //jsperf.com/js-jquery-html-content-change
The HTML DOM allows JavaScript to change the content of HTML elements.
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the innerHTML
property.
To change the content of an HTML element, use this syntax:
document.getElementById[id].innerHTML = new HTML
This example changes the content of a element:
Example
Hello World!
document.getElementById["p1"].innerHTML = "New text!";
Try it Yourself »
Example explained:
- The HTML document above contains a
element with
id="p1"
- We use the HTML DOM to get the element with
id="p1"
- A
JavaScript changes the content [
innerHTML
] of that element to "New text!"
This example changes the content of an element:
Example
Old Heading
const element = document.getElementById["id01"];
element.innerHTML = "New Heading";
Try it Yourself »
Example explained:
- The HTML document above contains an
element with
id="id01"
- We use the HTML DOM to get the element with
id="id01"
- A JavaScript changes the content [
innerHTML
] of that element to "New Heading"
Changing the Value of an Attribute
To change the value of an HTML attribute, use this syntax:
document.getElementById[id].attribute = new value
This example changes the value of the src attribute of an
document.getElementById["myImage"].src = "landscape.jpg";
Try it Yourself »
Example explained:
- The HTML document above contains an
document.getElementById["image"] = "pic_mountain.jpg";
Start the Exercise
How do I put text in a div?
Use the insertAdjacentText[] method to append text to a div element, e.g. container. insertAdjacentText['beforeend', 'your text here'] . The method inserts a new text node at the provided position, relative to the element it was called on.Can we set value in div?
div elements don't have a . value property that would get submitted to the backend; use an input element for that.How do you append text in JavaScript?
To append text to an element:.Use the document. createTextNode[] method to create a text node..Use the appendChild[] method to append the text node to the element..The appendChild method will add the text node to the end of the element's list of children..How do you edit content in HTML?
The easiest way to modify the content of an HTML element is by using the innerHTML property..The HTML document above contains aelement with id="p1".
We use the HTML DOM to get the element with id="p1".A JavaScript changes the content [ innerHTML ] of that element to "New text!".