Adding to markup with Javascript

I’m starting to learn about Javascript, so bear with me…

I am playing with a gallery/slider JQuery plugin called RoyalSlider. It has a function that returns an object with details about the current slide (example of what it returns below).

Now, what I don’t know how to do is actually spit that content out onto the DOM…

The only function I know of document.write().

I want some dynamic content pulled from the Slider that updates when the slide changes…

Suppose I had:

<div id="royalSlider">
   <div class="slide1">
      <img> </img>

   <div class="slide2">
      <img> </img>

</div> <!-- end slider -->

<div id="currentSlideDetails">
 <p> Dynamically load the details of the current slide here </p>

</div><!-- end slide details -->

An example return for a slider

{thumbnail: "<img width="96" height="72" class="rsTmb" src="htt….com/plugins/royal-slider/img/paintings/t/1.jpg">", animBlocks: false, id: 0, contentAdded: true, images: Array(1), …}
animBlocks: false
appendOnLoaded: false
bigImage: ""
caption: w.fn.init [text, prevObject: w.fn.init(1)]
content: w.fn.init [img.rsImg.rsMainSlideImage]
contentAdded: true
holder: w.fn.init [div.rsSlide]
iH: 500
iW: 400
id: 0
image: ""
images: [""]
isAdded: true
isAppended: true
isBig: false
isLoaded: true
isLoading: false
isRendered: true
loaded: [img]
loadedTriggered: true
numStartedLoad: 1
positionSet: false
sizeReady: true
thumbnail: "<img width="96" height="72" class="rsTmb" src="">"
videoURL: undefined
__proto__: Object

well, you’re probably looking at some innerHTML calls, a document.getElementById or document.querySelector call, and figuring out what’s in the caption element of that return and how to access it…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.