The structure of a webpage is like this :-
<div id='abc'>
<div class='a'>Some contents here </div>
<div class='b'>Some other contents< </div>
</div>
My aim is to add this after the class a in above structure.
<div class='a'>Some other contents here </div>
So that final structure looks like this :-
<div id='abc'>
<div class='a'>Some contents here </div>
<div class='a'>Some other contents here </div>
<div class='b'>Some other contents< </div>
</div>
Can there be a better way to do this using DOM properties. I was thinking of naive way of parsing the content and updating.
Please comment if I am unclear in asking my doubt !
Create the desired element, give it the desired attributes, children, innerHTML, etc, and then append it:
var parent = document.getElementById('abc'),
ele = document.createElement('div');
ele.setAttribute('class', 'a');
ele.innerHTML = "Some other contents here";
parent.appendChild(ele);
Fiddle
You can be lazy and just set the innerHTML of #abc, but in my opinion this method is more flexible.
I think this is what you are looking for http://jsfiddle.net/cExRS/
The code is this one
element = document.getElementById('abc');
element.innerHTML = "<div class='a'>Some other contents here </div>" + element.innerHTML;
You should really try jquery, it makes things a lot easier
Liked pointed out there's answer for prepending, Insert sibling node in JS
and How can I implement prepend and append with regular JavaScript?
<html>
<head>
<script type="text/javascript">
function add(myClass) {
var root = document.getElementById('abc');
var last = null;
for (var i = 0; i < root.childNodes.length; i++) {
var child = root.childNodes[i];
if (!child.className) continue;
var pat = new RegExp(myClass,'g');
var m = pat.exec(child.className);
if (!m) {
if (!last) continue;
var div = document.createElement('div');
div.appendChild(document.createTextNode('After A content'));
root.insertBefore(div, last.nextSibling);
break;
}
last = child;
}
}
</script>
</head>
<body>
<div id='abc'>
<div class='d'>Some contents here </div>
<div class='b'>Some other contents </div>
<div class='a'>Content A</div>
<div class='a'>Content A1</div>
<div class='a'>Content A2</div>
<div class='a'>Content A3</div>
<div class='b'>Some other contents </div>
</div>
Add div
</body>
</html>
This question is a duplicate :s
How can I implement prepend and append with regular JavaScript?
It's called prepending
Related
I want to add an DOM element that is found by ID into the body tag and remove all ewxisting body nodes.
My solution does not work:
var ele = document.getElementById("email");
document.body.innerHTML = ele;
This:
document.body.innerHTML = ele;
Will interpret ele as a string and write that string to the document body. That string is going to be something like "[object HTMLDivElement]" (may differ by browser).
and remove all ewxisting body nodes
It sounds like you're looking for document.body.replaceChildren() then? For example:
var ele = document.getElementById("email");
document.body.replaceChildren(ele);
<div>test 1</div>
<div id="email">test 2</div>
<div>test 3</div>
There are a few options.
Option 1 : clear the content of <body> and append your element as a child.
var el = document.getElementById("one");
document.body.innerHTML = ''; // Clears the body inner HTML
document.body.appendChild(el) // Appends your element as a child
<div id="one">
HELLO
</div>
GOOD BYE CONTENT
Option 2 : Replace children of <body> with your element.
var el = document.getElementById("one");
document.body.replaceChildren(el); // Replace the body content by your element
<div id="one">
HELLO
</div>
GOOD BYE CONTENT
With append or replaceChildren you can reach this.
const tag = document.querySelector('#email');
const w = document.createElement('div');
w.append(tag)
document.querySelector('body').innerHTML = '';
document.querySelector('body').append(w);
<html>
<head>Head</head>
<body>
<h1>body</h1>
<div id="email"> EMAIL </div>
</body>
</html>
const tag = document.querySelector('#email');
document.querySelector('body').replaceChildren(tag);
<html>
<head>Head</head>
<body>
<h1>body</h1>
<div id="email"> EMAIL </div>
</body>
</html>
Hi,
I have a code like this, first my fixed html which is the container:
<div id="messages"></div>
then the javascript that generates its contents:
var post = `<div id="${userid}">${content}</div>`;
var item = document.createElement('div');
item.innerHTML = post;
messages.appendChild(item);
the problem with this is that it wrapps each post in a div which I dont need. This should be the output
<div id="messages">
<div id="user45">some content</div>
<div id="user46">more content</div>
</div>
how can I append the content of the string directly to the container without the wrapper?
Thank you.
You can use insertAdjacentHTML:
messages.insertAdjacentHTML('beforeend', post)
How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.
const target = document.querySelector(".a");
target.innerHTML = //place your html here as string
Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}
You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>
i have a DOM Element
<div class="list-item">
<div class="name"></div>
<div class="id" data-id=""></div>
Link
</div>
I want to get the HTML like $('.list-item').html();
Then i want to fill parts like data-attributes and content with own variables so i can get for example this:
<div class="list-item">
<div class="name">NAME CONTENT</div>
<div class="id" data-id="123456">CONTENT</div>
Link
</div>
Then i want to store that as string in a varibale like
var htmlCode = '<div class="list-item">.....';
The tricky part here is to do that all in Javascript without changing the DOM Element. I hope for help. Thanks!
You can use .clone() to clone your div and then use .attr() to change attr from id class .
Demo Code :
var htmls = $(".list-item").clone()
$(htmls).find(".id").attr('data-id', 'somehting');
console.log($(htmls).html()) //store in variable..
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
<div class="name"></div>
<div class="id" data-id=""></div>
Link
</div>
You can use this
<script>
var html = $('.list-item').html();
console.log(html);
var list = $('<li></li>')
$('.list-item').children().each(function(index,elem){
$(list).append($(elem).clone());
})
$(list).children().each(function(i,e) {
$(e).data("id","1234")
$(e).html("ll");
})
console.log($(list).children());
</script>
Thank you all. With your help i got this solution:
var $temp = $('.list-item').html();
var $code = temp.replace('data-id=""', 'data-id="1234"').replace('href=""', 'href="https://link.de"');
So $code is my varibale wich stores the html as string without changing the DOM Element :)
i have a dom which i am copying in variable.
I want to replace the particular element from the variable with another element.
<div id="parent">
<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
</div>
This i have copied in variable. Now no relation with dom
I want to change it to
<div id="parent">
<img id="5"></img>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
</div>
This is what i am trying
var target = document.getElementById('parent');
var wrap = document.createElement('div');
wrap = wrap.appendChild(target.cloneNode(true));
Try this.
$('#parent').children().each(function(){
var ids = $(this).attr('id');
$(this).replaceWith( '<img id="'+ids+'"/>' );
});
Fiddle Demo
var target = document.getElementById('parent');
var wrap = document.createElement('div');
wrap = wrap.appendChild(target.cloneNode(true));
$(wrap).find("#1").html("<img id='5'></img>");
This works like a charm....without changing the dom