I don't know javascript and I have been searching every where for this answer. I would like to duplicate content in my page. The html and content es directly from a broker.
The result wanted is :
Click the button to change the text in this paragraph.
Click the button to change the text in this paragraph.
My HTML is:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<script language="javascript" type="text/javascript">
var elem = document.getElementById('demo').setAttribute('id', 'nextstep');
document.write(elem);
</script>
</body>
</html>
What I am getting is:
Click the button to change the text in this paragraph.
undefined
Can somebody help point me in the right direction? Thanks in advance!
I don't know javascript and I have been searching every where for this answer. I would like to duplicate content in my page. The html and content es directly from a broker.
The result wanted is :
Click the button to change the text in this paragraph.
Click the button to change the text in this paragraph.
My HTML is:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<script language="javascript" type="text/javascript">
var elem = document.getElementById('demo').setAttribute('id', 'nextstep');
document.write(elem);
</script>
</body>
</html>
What I am getting is:
Click the button to change the text in this paragraph.
undefined
Can somebody help point me in the right direction? Thanks in advance!
I don't believe you want to be using document.write. I think this is what you're after:
<script language="javascript" type="text/javascript">
// this gets the element
var elem = document.getElementById('demo');
// this copies the entire element, including the id
var newElem = elem.cloneNode(true);
// this sets a new id
newElem.setAttribute('id', 'nextstep');
// generic way to make sure you insert properly
var before = elem.nextSibling;
// there's no insertAfter, only insertBefore, which is why we found the before
elem.parentNode.insertBefore(newElem, before);
</script>
FIDDLE
You need to grab the innerHTML and set it:
var elem = document.getElementById('demo').innerHTML;
document.write(elem);
Beware though, document.write is going to overwrite everything..
If u need to get this
<p id="demo">Click the button to change the text in this paragraph.</p>
<p id="nextstep">Click the button to change the text in this paragraph.</p>
try
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<script language="javascript" type="text/javascript">
var elem = document.getElementById('demo');
var newElem = document.createElement('div');
newElem.innerHTML = "<p id='nextstep'>" + elem.innerHTML + "</p>";
document.write(newElem.innerHTML);
</script>
</body>
</html>
You are setting elem to the return value of setAttribute, which is undefined as it returns nothing.
Change the code to:
var elem = document.getElementById('demo');
elem.setAttribute('id', 'nextstep');
document.write(elem.innerHTML);
Example - http://jsfiddle/P8EcL/
This still does not end up with exactly what you want as it is copy of the content of the p tag rather than the tag itself.
Scott Mermelstein's answer is what you want.
var elem = document.getElementById('demo').innerHTML;
document.write(elem);
I'm not sure why you're trying to set a new id on the original div and expect it to return the HTML, but it's not going to work ;)