I want to generate HTML-code at the beginning of an existing element.
This is the existing HTML-element:
<div id="container">
<p>end of the element</p>
</div>
With my current solution I add the generated element beneath the existing content:
document.getElementById(container).innerHTML += "<p>start of the element</p>";
How to add content above the existing content of an element with innerHTML?
Prepend document.getElementById('container').innerHTML
to the assignment and remove +=
shorthand:
document.getElementById('container').innerHTML = "<p>start of the element</p>" + document.getElementById('container').innerHTML;
<div id="container">
<p>end of the element</p>
</div>
There is a relatively new function especially for that: insertAdjacentHTML
. Which has four options: before the opening tag (beforeBegin
), right after the opening tag (afterBegin
), just before the closing tag (beforeEnd
), and after the closing tag (afterEnd
). In your case:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<p>First paragraph in the code, but should become second after the Javascript fired.</p>
</div>
<script>
document.querySelector('div').insertAdjacentHTML('afterBegin','<p>Second paragraph in the code, but should become first.</p>')
</script>
</body>
</html>
This code might work
var newItem = document.createElement("p");
newItem.innerHTML = "start of the element";
var container = document.getElementById("container");
var currentItem = document.getElementById("container").firstChild;
container.insertBefore(newItem, currentItem);
I need to discover the function 'foo' on class Something and it doesn't work. Is this because I am missing a subtlety of using class syntax or because of babel or something else? I would prefer to use ...
I need to discover the function 'foo' on class Something and it doesn't work. Is this because I am missing a subtlety of using class syntax or because of babel or something else? I would prefer to use ...
This is incredibly annoying.. I am wondering why the heck my changes aren't reflected as I notice that my JavaScript file for my Web Worker always gets loaded from cache: I have disabled the Cache ...
This is incredibly annoying.. I am wondering why the heck my changes aren't reflected as I notice that my JavaScript file for my Web Worker always gets loaded from cache: I have disabled the Cache ...
Tring to add interceptor header for my every request, however, it is giving me below error. Uncaught Error: [$injector:cdep] Circular dependency found: $http <- Auth <- ...
Tring to add interceptor header for my every request, however, it is giving me below error. Uncaught Error: [$injector:cdep] Circular dependency found: $http <- Auth <- ...
$(".className") return all the element having class .className , I want to add style only to a particular element i.e. I want to access element using their index number. <html> <head> ...
$(".className") return all the element having class .className , I want to add style only to a particular element i.e. I want to access element using their index number. <html> <head> ...