Adding to markup with Javascript

JavaScript
1

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>

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

</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: "https://dimsemenov.com/plugins/royal-slider/img/paintings/1.jpg"
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: "https://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/1.jpg"
images: ["https://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/1.jpg"]
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="https://dimsemenov.com/plugins/royal-slider/img/paintings/t/1.jpg">"
videoURL: undefined
__proto__: Object
2

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…

3

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