{"id":551,"date":"2006-06-14T19:45:07","date_gmt":"2006-06-14T17:45:07","guid":{"rendered":"http:\/\/frenchfragfactory.net\/ozh\/archives\/2006\/06\/14\/javascript-quick-reference-for-newbies-inserting-content\/"},"modified":"2007-05-08T15:45:58","modified_gmt":"2007-05-08T13:45:58","slug":"javascript-quick-reference-for-newbies-inserting-content","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2006\/06\/javascript-quick-reference-for-newbies-inserting-content\/","title":{"rendered":"Javascript quick reference for newbies : inserting content"},"content":{"rendered":"

Situation : You want to insert some simple content into a DOM element. Since you happen to be a javascript n00b like me who always forget how to do it, and you don't want to use a 60 kb prototype.js<\/em> for your 10 javascript lines project, you thought it would be useful to write down once for all how this is done. Right ? Hmmkey.
\n<\/p>\n

HTML start :<\/h2>\n

Say the HTML we have is something like the following :<\/p>\n

\n\n\t\t
\n\n\t\t
\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
HTML<\/div>\n\n\t\t\n\t\t
\n\n\t<\/div>\n\t\n\t
\n\t\t
  1. <div<\/span>><\/span>hello <span<\/span> id<\/span>=<\/span>"myspan"<\/span>><\/span>mister<\/<\/span>span<\/span>><\/span> Ozh<\/<\/span>div<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

    Create new content with Javascript :<\/h2>\n

    You will either create a new HTML element (a DIV, a SPAN etc) and its content (innerHTML), or raw text :<\/p>\n

    \n\n\t\t
    \n\n\t\t
    \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
    js<\/div>\n\n\t\t\n\t\t
    \n\n\t<\/div>\n\t\n\t
    \n\t\t
    1. var target = document.getElementById('myspan');<\/div><\/li>\n
    2.  <\/div><\/li>\n
    3. \/\/ method 1 : create an HTML element<\/div><\/li>\n
    4. var content = document.createElement('span');<\/div><\/li>\n
    5. content.innerHTML = 'I am an <em>inserted<\/em> SPAN';<\/div><\/li>\n
    6.  <\/div><\/li>\n
    7. \/\/ method 2 : create raw text with no markup<\/div><\/li>\n
    8. var newtext = document.createTextNode('INSERTED');<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

      Insert Before :<\/h2>\n
      \n\n\t\t
      \n\n\t\t
      \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
      js<\/div>\n\n\t\t\n\t\t
      \n\n\t<\/div>\n\t\n\t
      \n\t\t
      1. target.parentNode.insertBefore(content, target);<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

        HTML result :<\/p>\n

        \n\n\t\t
        \n\n\t\t
        \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
        HTML<\/div>\n\n\t\t\n\t\t
        \n\n\t<\/div>\n\t\n\t
        \n\t\t
        1. hello INSERTED<span<\/span> id<\/span>=<\/span>"myspan"<\/span>><\/span>mister<\/<\/span>span<\/span>><\/span> Ozh<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

          Insert at the Top :<\/h2>\n
          \n\n\t\t
          \n\n\t\t
          \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
          js<\/div>\n\n\t\t\n\t\t
          \n\n\t<\/div>\n\t\n\t
          \n\t\t
          1. target.insertBefore(content, target.firstChild);<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

            HTML result :<\/p>\n

            \n\n\t\t
            \n\n\t\t
            \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
            HTML<\/div>\n\n\t\t\n\t\t
            \n\n\t<\/div>\n\t\n\t
            \n\t\t
            1. hello <span<\/span> id<\/span>=<\/span>"myspan"<\/span>><\/span>INSERTEDmister<\/<\/span>span<\/span>><\/span> Ozh<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

              Insert at the Bottom :<\/h2>\n
              \n\n\t\t
              \n\n\t\t
              \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
              js<\/div>\n\n\t\t\n\t\t
              \n\n\t<\/div>\n\t\n\t
              \n\t\t
              1. target.appendChild(content);<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

                HTML result :<\/p>\n

                \n\n\t\t
                \n\n\t\t
                \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
                HTML<\/div>\n\n\t\t\n\t\t
                \n\n\t<\/div>\n\t\n\t
                \n\t\t
                1. hello <span<\/span> id<\/span>=<\/span>"myspan"<\/span>><\/span>misterINSERTED<\/<\/span>span<\/span>><\/span> Ozh<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

                  Insert After :<\/h2>\n
                  \n\n\t\t
                  \n\n\t\t
                  \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
                  js<\/div>\n\n\t\t\n\t\t
                  \n\n\t<\/div>\n\t\n\t
                  \n\t\t
                  1. target.parentNode.insertBefore(content, target.nextSibling);<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

                    HTML result :<\/p>\n

                    \n\n\t\t
                    \n\n\t\t
                    \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
                    HTML<\/div>\n\n\t\t\n\t\t
                    \n\n\t<\/div>\n\t\n\t
                    \n\t\t
                    1. hello <span<\/span> id<\/span>=<\/span>"myspan"<\/span>><\/span>mister<\/<\/span>span<\/span>><\/span>INSERTED Ozh<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

                      prototype functions<\/h2>\n

                      For reference, using javascript framework prototype<\/a>, these 4 content insertion can be achieved with the following :<\/p>\n

                      \n\n\t\t
                      \n\n\t\t
                      \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
                      js<\/div>\n\n\t\t\n\t\t
                      \n\n\t<\/div>\n\t\n\t
                      \n\t\t
                      1. new Insertion.Before(target, content);<\/div><\/li>\n
                      2. new Insertion.Top(target, content);<\/div><\/li>\n
                      3. new Insertion.Bottom(target, content);<\/div><\/li>\n
                      4. new Insertion.After(target, content);<\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"

                        Situation : You want to insert some simple content into a DOM element. Since you happen to be a javascript n00b like me who always forget how to do it, and you don't want to use a 60 kb prototype.js for your 10 javascript lines project, you thought it would be useful to write down once for all how this\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[2,7,202],"class_list":["post-551","post","type-post","status-publish","format-standard","hentry","tag-code","tag-javascript","tag-prototype"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}