Instead of tediously search for workarounds for each type of attribute and event when using the following syntax:
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);
Is there a way where I can just declare the entire HTML element as a string? like:
elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);
Instead of directly messing with innerHTML it might be better to create a fragment and then insert that:
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);
Benefits:
Even though innerHTML is used within the function, it's all happening outside of the DOM so it's much faster than you'd think...
You want this
document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );
body element but works fine on any other element.
<body>. As a matter of fact, running it on <body> is my standard method of injecting stuff like style sheets into web pages via the console. What issue are you having?
<body> were undefined, so would be all other elements, so this is likely not Phill’s issue.Have a look at insertAdjacentHTML
var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>
position is the position relative to the element you are inserting adjacent to:
'beforebegin' Before the element itself
'afterbegin' Just inside the element, before its first child
'beforeend' Just inside the element, after its last child
'afterend' After the element itself
In old school JavaScript, you could do this:
document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;
In response to your comment:
[...] I was interested in declaring the source of a new element's attributes and events, not the
innerHTMLof an element.
You need to inject the new HTML into the DOM, though; that's why innerHTML is used in the old school JavaScript example. The innerHTML of the BODY element is prepended with the new HTML. We're not really touching the existing HTML inside the BODY.
I'll rewrite the abovementioned example to clarify this:
var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'
Using a JavaScript framework would make this code much less verbose and improve readability. For example, jQuery allows you to do the following:
$('body').prepend('<p id="foo">Some HTML</p>');
document.getElementsByTagName('body')[0] can indeed be replaced by document.body, good point. However, if you want to prepend or append the new HTML to another existing element instead of the BODY, you'll have to use document.getElementById() and/or document.getElementsByTagName(); that's why I used it in the example.
To my knowledge, which, to be fair, is fairly new and limited, the only potential issue with this technique is the fact that you are prevented from dynamically creating some table elements.
I use a form to templating by adding "template" elements to a hidden DIV and then using cloneNode(true) to create a clone and appending it as required. Bear in ind that you do need to ensure you re-assign id's as required to prevent duplication.
As others said the convenient jQuery prepend functionality can be emulated:
var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;
While some say it is better not to "mess" with innerHTML, it is reliable in many use cases, if you know this:
If a
<div>,<span>, or<noembed>node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as&,<and>respectively. UseNode.textContentto get a correct copy of these text nodes' contents.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Or:
var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)
insertAdjacentHTML is probably a good alternative: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
textContent, the solution to copying the full HTMl from one node to another :)document.body.insertAdjacentHTML(position, text)
This is worked for me, here is details about it: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
If you want to insert HTML code inside existing page's tag use Jnerator. This tool was created specially for this goal.
Instead of writing next code
var htmlCode = '<ul class=\'menu-countries\'><li
class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;
You can write more understandable structure
var jtag = $j.ul({
class: 'menu-countries',
child: [
$j.li({ class: 'item', child: [
$j.img({ src: 'au.png' }),
$j.span({ child: 'Australia' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'br.png' }),
$j.span({ child: 'Brazil' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'ca.png' }),
$j.span({ child: 'Canada' })
]})
]
});
var htmlCode = jtag.html();
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;
