www.webdeveloper.com
Results 1 to 4 of 4

Thread: Script for, insert class A after class B, don't have access to A

Hybrid View

  1. #1
    Join Date
    Oct 2011
    Posts
    42

    Script for, insert class A after class B, don't have access to A

    Hi all,

    I’m working on a page that has a chart that has all the code in the back end, so I can’t access the HTML/CSS for it.
    However, I want to add a banner inside this chart. How can I get HTML to insert itself after a certain div (that I don’t have access to)?

    So for example:

    <div class=”offer-Chart”>
    <div class=”offer-Chart-body”></div>
    <div class=”offer-Banner”></div>
    *I want to insert the new class “offer-Banner” here but again I don’t have access to the other surrounding code.
    </div>

    Is there javascript that can say “insert class “ .offer-Banner” after class “.offer-Chart-body”?

    Thanks for any help with this.

  2. #2
    When you say insert a 'class' -- do you mean add "offer-Banner" to the element that already says "offer-Banner", or do you mean create a new DIV with that class on it?

    Really your question doesn't make a whole lot of sense. I THINK you want 'insertBefore' or 'appendChild', but I'm really not quite grasping what it is you are asking; I think you have your terminology garbled.... since if you have Javascript you have access to the DOM, so there isn't a blasted thing "you don't have access to"...

  3. #3
    Join Date
    Oct 2011
    Posts
    42
    Sorry, if this question wasn’t clear, I’m having a difficult time explaining it.
    So, I'm working in a CMS, and I have this page, and there is an offer chart on this page. But the HTML for this offer chart is in the backend (where I myself can’t access)…but I can see the code when I use a browser inspector. I want to insert a new banner inside the offer chart -- So I want to create a new div with the “offer-Banner” class. And the “offer-Banner” class will show after the “offer-Chart-Body” class. Does that clear it up a little?

    Thanks for replying.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,089
    assuming there is only one div with the class name offer-Banner...

    Code:
    <div class="offer-Chart">
    <div class="offer-Chart-body">chart</div>
    <div class="offer-Banner">banner</div>
    </div>
    <script type="text/javascript">
    var newdiv =document.createElement("div")
    newdiv.appendChild(document.createTextNode("hi! I'm new!"));
    var refNode = document.querySelector(".offer-Banner");
    refNode.parentNode.insertBefore(newdiv, refNode.nextSibling);
    </script>
    as always, make sure the js runs after the dom has loaded

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles