html - How can I dynamically add a paragraph to a document without overwriting everything else in javascript? - Stack Overflow

admin管理员组

文章数量:1279187

I'm just learning how to write javascript, but i've already learned java. the difference in syntax is driving me nuts. i'm just doing a dumb little sample code to see if i can add a paragraph to the end of a page at the click of a button. but i can't seem to do it. i'm positive that i'm really close to achieving my goal though. i already know the button functions properly. there is a similar post that has helped me, but i can't seem to quite get to where i want. here's the javascript:

function displayDate()
{
//object that will hold newParagraph
var iframe = document.createElement("iframe");
iframe.width = 400;
iframe.height += 50;
iframe.id ="iframe";

var ment = "woohooo! go me.";
//var doc = iframe.contentDocument || iframe.document;
var newParagraph = document.createElement('p');
newParagraph.textContent = ment;

//doc.body.appendChild(newParagraph);
iframe.appendChild(newParagraph);
document.getElementById("updateDiv").appendChild(iframe);
//the id updateDiv is in my html
}

the iframe shows up as a blank box without the text. i cannot figure out how to get the text to appear in the iframe.

here's the similar post if you're curious: Adding iframe and paragraph elements dynamically

I'm just learning how to write javascript, but i've already learned java. the difference in syntax is driving me nuts. i'm just doing a dumb little sample code to see if i can add a paragraph to the end of a page at the click of a button. but i can't seem to do it. i'm positive that i'm really close to achieving my goal though. i already know the button functions properly. there is a similar post that has helped me, but i can't seem to quite get to where i want. here's the javascript:

function displayDate()
{
//object that will hold newParagraph
var iframe = document.createElement("iframe");
iframe.width = 400;
iframe.height += 50;
iframe.id ="iframe";

var ment = "woohooo! go me.";
//var doc = iframe.contentDocument || iframe.document;
var newParagraph = document.createElement('p');
newParagraph.textContent = ment;

//doc.body.appendChild(newParagraph);
iframe.appendChild(newParagraph);
document.getElementById("updateDiv").appendChild(iframe);
//the id updateDiv is in my html
}

the iframe shows up as a blank box without the text. i cannot figure out how to get the text to appear in the iframe.

here's the similar post if you're curious: Adding iframe and paragraph elements dynamically

• javascript
• html

Share Improve this question Follow edited May 23, 2017 at 12:16 CommunityBot 111 silver badge asked Jun 20, 2011 at 5:26 lukeluke 4111 gold badge11 silver badge33 bronze badges 4

• For me var doc = iframe.contentDocument || iframe.document; worked but var doc = iframe.contentDocument || iframe.contentWindow.document; didn't, and I was able to add an iframe to the page but then the new paragraph didn't appear for some reason though I didn't get any further errors. As an aside, any reason for the += when setting the iframe height? As a further aside, what's the point of using an iframe in this scenario (other than to prove that you can)? – nnnnnn Commented Jun 20, 2011 at 7:13
• i was only using the iframe because i'm new at javascript and i just followed the other example i found on this website. i'm sure there are other ways to do it but this is the only way i am aware of so far. and the += was because this is a sample code that i plan on using for a website to add ments to a page, so with each ment, another 50 px in height is added so the new ment can fit. that way it keeps growing to fit all the new ments. – luke Commented Jun 20, 2011 at 18:57
• I changed the script up a little bit with your help @nnnnnn, and some other ideas online. the edited script appears above. but i can only get the iframe to appear as a blank box without newParagraph in it. any ideas on that? – luke Commented Jun 20, 2011 at 19:27
• The code you have posted is very similar to the broken code in the question you linked to. Have a look at the accepted answer to the question you linked. You need to make your code like that with the load event. Although, I'm not sure why you would want to use an iframe like this, I would think a div would make more sense. But maybe there's some reason. – James Montagne Commented Jun 20, 2011 at 19:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

If you just want to add a paragraph to the document, ditch the iframe. An iframe embeds a pletely new document inside your browser window. For your purposes, simply appending the <p> element onto the <div id='updateDiv'> should be enough:

function displayDate() {
    var ment = "woohooo! go me.";
    var newParagraph = document.createElement('p');
    newParagraph.textContent = ment;
    document.getElementById("updateDiv").appendChild(newParagraph);
}

and here's the HTML:

<button id='a'>Click Me!</button>
<div id='updateDiv'></div>    

And here's the fiddle example: http://jsfiddle/MYy72/

本文标签：