creating html by javascript DOM (realy basic question)_问答_开发者

creating html by javascript DOM (realy basic question)

开发者 https://www.devze.com 2023-04-07 06:32 出处：网络

i\'m having some trouble with javascript. Somehow i can\'t get started (or saying i\'m not getting any results) with html elements creation by javascript.

相关专题：dom javascript

i'm having some trouble with javascript. Somehow i can't get started (or saying i'm not getting any results) with html elements creation by javascript.

i'm not allowed to use:

document.writeln("<h1>...</h1>");

i've tried this:

document.getElementsByTagName('body').appendChild('h1');
document.getElementsByTagName('h1').innerHTML = 'teeeekst';

and this:

var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));

but my browser isn't showing any text. When i put an alert in this code block, it does sho开发者_开发百科w. So i know the code is being reached.

for this school assignment i need to set the entire html, which normally goes into the body, by javascript.

any small working code sample to set a h1 or a div?

my complete code:

<html>
  <head>
    <title>A boring website</title>
    <link rel="stylesheet" type="text/css" href="createDom.css"> 


    <script type="text/javascript">

    var element = document.createElement('h1');
element.innerHTML = "Since when?";

document.body.appendChild(element);


    </script>

  </head>
  <body>

 </body>
</html>

getElementsByTagName returns a NodeList (which is like an array of elements), not an element. You need to iterate over it, or at least pick an item from it, and access the properties of the elements inside it. (The body element is more easily referenced as document.body though.)

appendChild expects an Node, not a string.

var h1 = document.createElement('h1');
var content = document.createTextNode('text');
h1.appendChild(content);
document.body.appendChild(h1);

You also have to make sure that the code does not run before the body exists as it does in your edited question.

The simplest way to do this is to wrap it in a function that runs onload.

window.onload = function () {
    var h1 = document.createElement('h1');
    var content = document.createTextNode('text');
    h1.appendChild(content);
    document.body.appendChild(h1);
}

… but it is generally a better idea to use a library that abstracts the various robust event handling systems in browsers.

Did you append the element to document?

Much the same way you're appending text nodes to the newly created element, you must also append the element to a target element of the DOM.

So for example, if you want to append the new element to a <div id="target"> somewhere are the page, you must first get the element as target and then append.

//where you want the new element to do
var target = document.getElementById('target'); 
// create the new element
var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));
// append
target.appendChild(element);

create element, add html content and append to body

var element = document.createElement('h1');
element.innerHTML = 'teeeekst';
document.body.appendChild(element);

creating html by javascript DOM (realy basic question)

精彩评论

关注公众号

热门标签

图文推荐

creating html by javascript DOM (realy basic question)

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：