Rich-text Reply

Inserting a new <div></div> on the page

KO 01-13-17

Inserting a new <div></div> on the page

Hi There, 

 

I am looking to develop a test on some of our product pages that utilize branded  video to enhance the overall experience. To accomplish this, I am looking to insert a blank div above the product name that is located underneath the images/sizing selector, etc. 

 

my first attempt is below...but the editor is not down with this at all:

 

$('h2').prepend("<div id = "video_container">...</div>")

I've done this before with images and noticed that the img ID always ends up being "<img_id = optimizely_xxxxxx>" or something along those lines. Just wondering if someone might be able to help me out here and let me know the correct documentation for adding additional content areas on the page. 

 

Hoping to populate this blank div with an iFrame that will house the video. 

 

Thanks!

KO
Level 2

Re: Inserting a new <div></div> on the page

Not sure (if you send me an URL I could look more carefully), but you're using a generic h2 selector, it's better to use a class/ID to identify the element you want to prepend to.

Also, depending on the div that h2 is, you may wanna use .before instead of prepend (imagine if the div has some width constrains and you want to add full width video frame).

cheers,
Ivo
Performance Marketing Manager @ Blacklane
Founder @ Stereofox

David_Orr 01-19-17
 

Re: Inserting a new <div></div> on the page

Hi there,

 

Aside from the quotes around "video_container" not being escaped and a missing semi-colon the code appears to be correct. What happens when you run the line of code on your page using Chrome or Firefox's dev tools?

 

David

Senior Technical Support Engineer
Optimizely