SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Append and Prepend without JQuery?

    Hi,

    I am trying to write the following in JavaScript without the help of JQuery.

    Code:
    $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />');
    $("body").prepend('<p>My content goes here</p>');
    Is there a way to do that?

    Thanks for any ideas.

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nayen View Post
    Code:
    $("body").prepend('<p>My content goes here</p>');
    Code:
    var e = document.createElement('p');
    e.innerHTML = 'My content goes here';
    document.body.insertBefore(e, document.body.childNodes[0]);

  3. #3
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,270
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    Code JavaScript:
    $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />');

    you could replace with

    Code JavaScript:
    var newLink = document.createElement("link");
    newLink.href = "style.css";
    newLink.setAttribute('rel', 'stylesheet');
    newLink.setAttribute('type', 'text/css');
     
    document.head.appendChild(newLink);

  4. #4
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nayen View Post
    Hi,
    Code:
    $("body").prepend('<p>My content goes here</p>');
    Variant:

    Code:
    var e = document.createElement('p');
    var t = document.createTextNode("My content goes here");
    e.appendChild(t);
    document.body.insertBefore(e, document.body.childNodes[0]);

  5. #5
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by myty View Post
    Code:
    var e = document.createElement('p');
    e.innerHTML = 'My content goes here';
    document.body.insertBefore(e, document.body.childNodes[0]);
    Thanks a lot. What if I have dynamic HTML in

    Code:
    $("body").prepend('no idea what HTML will be here');
    Quote Originally Posted by fretburner View Post
    Code JavaScript:
    $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />');

    you could replace with

    Code JavaScript:
    var newLink = document.createElement("link");
    newLink.href = "style.css";
    newLink.setAttribute('rel', 'stylesheet');
    newLink.setAttribute('type', 'text/css');
     
    document.head.appendChild(newLink);
    Thank you very much! It worked.

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nayen View Post
    Thanks a lot. What if I have dynamic HTML in

    Code:
    $("body").prepend('no idea what HTML will be here');
    Once you have created the element e, you have a javascript object on your hands.
    You either access its innerHTML property (first example), or build its content with appendChild (second example).
    Both are dynamic:
    Code:
    e.innerHTML = e.innerHTML + '<span>More of my content</span>'
    Code:
    var s = document.createElement('span');
    var t = document.createTextNode("More of my content");
    s.appendChild(t);
    e.appendChild(s);

  7. #7
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nayen View Post
    Thanks a lot. What if I have dynamic HTML in

    Code:
    $("body").prepend('no idea what HTML will be here');
    e.innerHTML or e.appendChild can be augmented with any type of content.

  8. #8
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by myty View Post
    e.innerHTML or e.appendChild can be augmented with any type of content.
    Thank you very much, I added a div and then the dynamic content within that div and it works fine now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •