Is there any way to display all inner html content inside a div with plain javascript?
MyFiddle
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output">
</div>
I am trying to use outerhtml
var parent = document.getElementById("parent");
document.getElementById("output").innerHTML = parent.outerHtml;
You misspelled outerHTML (HTML in all capital). But to show HTML tags as well, use innerText instead
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
<div id="parent">
<div id="child">
some-value
</div>
</div>
<pre id="output"></pre>
Use innerText with outerHTML
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
#output {
white-space: pre;
}
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output"></div>
If you want to create everything from Javascript only. Look at this example.
var div = document.createElement("div");
var nodeDiv = document.createTextNode("Pay attention! This is new.");
div.appendChild(nodeDiv);
var element = document.getElementById("parent");
element.appendChild(div);
<div id="parent">
<div id="child">
some-value
</div>
</div>
Related
How can i select only the - sign as a string using jquery or plain javascript?
I have no idea how i can do that.
<div class="container">
-
<div class="amount">
$3
</div>
</div>
With jQuery you can use contents and - will be the first node that you can get with first selector.
const div = $(".container");
const node = div.contents().first();
console.log(node.text().trim())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
-
<div class="amount">
$3
</div>
</div>
If you want to replace the text node with some other text or html element you can use replaceWith jquery method.
const div = $(".container");
const node = div.contents().first()
const newEl = $('<span>', {
text: node.text().trim() + ' update',
style: "color: red;"
})
node.replaceWith(newEl)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
-
<div class="amount">
$3
</div>
</div>
Access the first childNode of the .container:
console.log(document.querySelector('.container').childNodes[0]);
<div class="container">
-
<div class="amount">
$3
</div>
</div>
If you want to make sure that you get the content exactly, without selecting other children of the parent div, I suggest you should do it like this:
var content = $("#targetDiv")
.clone() //copy your div
.children() //get all its children
.remove() //destroy the children
.end() //select the element again(now it doesn't have children)
.text() //get the text of your div;
console.log(content);
<div class="container" id="targetDiv">
-
<div class="amount">
$3
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Check the snippet and see that it works.
I'm a wondering how I can get innerHTML of div when it contains a div element and a text. My code looks like this:
var outer = document.getElementById("outer").childNodes;
outer.forEach(function(e) {
console.log(e.innerHTML);
});
<div id="outer">
<div class="item">
<div class="icon"></div>
Hello
</div>
</div>
As you can see, innerHTML is getting the child div and the text, but I only want the text. Is it possible to make it without splitting or something?
I would put Hello in a separate container if you can.
var outer = document.getElementById("outer");
var firstItem = outer.children[0];
var text = firstItem.querySelector('.text').innerHTML;
console.log(text);
<div id="outer">
<div class="item">
<div class="icon"></div>
<span class="text">Hello</span>
</div>
</div>
That way you have more control over it if you want to add more content
I need some help
I have string from my innerHTML div
<div class="class-1">
<div class="class-1">
<div class="class-bla-bla class-find">Replace this div</div>
<div class="class-another">Hello World!</div>
</div>
<div class="class-2">
<div class="class-2 class-find">Replace this div</div>
<div class="class-no-replace">No replace</div>
</div>
<div class="class-somthing class-find">Replace this div</div>
</div>
and I want to use regex to find and replace all element with class name class-find and store the innerHTML string into database without change the actual HTML DOM, I tried to find the solution but I can not find any good answer for my case, please give me a favor to solve this out.
Note: I have found some sample regex https://www.regextester.com/93456, this only work if the element only have one class not multiple.
As regex is not meant to parse HTML. You can use the DOMParser API for the purpose.
let d = new DOMParser();
let s = `<div class="class-1">
<div class="class-1">
<div class="class-bla-bla class-find">Replace this div</div>
<div class="class-another">Hello World!</div>
</div>
<div class="class-2">
<div class="class-2 class-find">Replace this div</div>
<div class="class-no-replace">No replace</div>
</div>
<div class="class-somthing class-find">Replace this div</div>
</div>`;
let doc = d.parseFromString(s, 'text/html');
let divs = doc.querySelectorAll('.class-find');
let html = [];
divs = divs.forEach(e => {
html.push(e.innerHTML);
});
console.log(html);
I am trying to use jQuery to get the value of the divs with the classes of more_details_con, more_details_desc and more_details_res and when edit_entry is clicked but I don't think I am traversing the DOM correctly because the alert just says undefined.
The HTML
<div class="details">
<span class="id">1234</span>
<span class="contact">account name</span>
</div>
<div class = "more_details">
<div class = "more_details_btns">
<div class="go_account">Go to Account</div>
<div class="edit_entry">Edit</div>
<div class="delete_entry">Delete</div>
</div>
<div class="container">
<div class="more_details_title">Contact:</div>
<div class="more_details_con">Contact name</div>
<p class="clear"></p>
</div>
<div class="container">
<div class="more_details_title">Description:</div>
<div class="more_details_desc">Actual Description</div>
<p class="clear">
</div>
<div class="container">
<div class="more_details_title">Resolution:</div>
<div class="more_details_res">Actual Resolution</div>
<p class="clear">
</div>
</div>
The jQuery I've tried
$("#results").on("click", ".edit_entry", function() {
var contact = $(this).next(".more_details_con").html();
var desc = $(this).next(".more_details_desc").html();
var res = $(this).next(".more_details_res").html();
alert(contact+desc+res);
});
The issue is because the elements you're looking for are not siblings of the one which raised the event. You instead could use closest() to find the nearest common parent element, .more_details, and then find() to get the element you want. Try this:
$("#results").on("click", ".edit_entry", function() {
var $parent = $(this).closest('.more_details');
var contact = $parent.find(".more_details_con").text();
var desc = $parent.find(".more_details_desc").text();
var res = $parent.find(".more_details_res").text();
console.log(contact, desc, res);
});
Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()