Get Content of a Div Using JavaScript

Get content of a DIV using JavaScript

(1) Your <script> tag should be placed before the closing </body> tag. Your JavaScript is trying to manipulate HTML elements that haven't been loaded into the DOM yet.

(2) Your assignment of HTML content looks jumbled.

(3) Be consistent with the case in your element ID, i.e. 'DIV2' vs 'Div2'

(4) User lower case for 'document' object (credit: ThatOtherPerson)

<body>
<div id="DIV1">
// Some content goes here.
</div>

<div id="DIV2">
</div>
<script type="text/javascript">

var MyDiv1 = document.getElementById('DIV1');
var MyDiv2 = document.getElementById('DIV2');
MyDiv2.innerHTML = MyDiv1.innerHTML;

</script>
</body>

How can get the text of a div tag using only javascript (no jQuery)

You'll probably want to try textContent instead of innerHTML.

Given innerHTML will return DOM content as a String and not exclusively the "text" in the div. It's fine if you know that your div contains only text but not suitable if every use case. For those cases, you'll probably have to use textContent instead of innerHTML

For example, considering the following markup:

<div id="test">
Some <span class="foo">sample</span> text.
</div>

You'll get the following result:

var node = document.getElementById('test'),

htmlContent = node.innerHTML,
// htmlContent = "Some <span class="foo">sample</span> text."

textContent = node.textContent;
// textContent = "Some sample text."

See MDN for more details:

  • textContent
  • innerHTML

How to get value of a div using javascript

DIVs do not have a value property.

Technically, according to the DTDs, they shouldn't have a value attribute either, but generally you'll want to use .getAttribute() in this case:

function overlay()
{
var cookieValue = document.getElementById('demo').getAttribute('value');
alert(cookieValue);
}

Print the contents of a DIV

Slight changes over earlier version - tested on CHROME

function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');

mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/

mywindow.print();
mywindow.close();

return true;
}

how get content of div via javascript

You need to wait until the HTML docuemnt is fully loaded. Try this:

<script type="text/javascript">
window.onload = function(){
var topagge = document.getElementsByClassName("topage");
console.log(topagge);
}
</script>

EDIT:

window.getElementsByClassName returns an array of elements; then, following code will get HTML content of first element:

topagge[0].innerHTML

Get content of a div before and after id (or class) with native Javascript

You need this:

var previous = document.getElementById("helloWorld").previousElementSibling;
var next = document.getElementById("helloWorld").nextElementSibling;

Also read this,
The difference between previousSibling and previousElementSibling, is that previousSibling returns the previous sibling node as an element node, a text node or a comment node, while previousElementSibling returns the previous sibling node as an element node (ignores text and comment nodes).

How to target a div using content inside the div

Just keep it simple, find all elements with target class and pick the first one:

const el = document.getElementsByClassName('test')
$('<div>new text</div>').insertAfter(el[0])
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>First Div</div>
<div class='test'>Second Div</div>

Get value from div with javascript: Always get undefined

Try this

var n1 = document.getElementById('editor').innerHTML; // or innerText, or textContent

how to get content in a div without specific child element

alert($("div.news").contents().not("figure.summary").text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="news">     i need this content
<figure class="summary"> i dont need this content </figure>
</div>

how to get content of div in a html from another html

You do not need to use an iframe; you can use ajax to do that. It's very straight forward.

$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});

EDIT

As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.

In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.



Related Topics



Leave a reply



Submit