CODEWITHSUNDEEP
javascripthtmljqueryfunction
Antonio Labate
Antonio Labate

Reputation: 23

How to take content from an element in a webpage and show it in my html page?

I need to take the content from the elements of a page with a specific class "verse" and show it in my page, that contains a text input (to insert the link of the page where the content is) and a button to trigger the function that does the work.

This is my HTML file.

<!DOCTYPE html>
<html>
<head>
    <title>Get Verse 1.0</title>
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
</head>
<body>
    <!--takes an input value-->
    <input type="text" id="link"> 
    <!--calls the function to display text-->
    <input id="clickMe" type="button" value="Enter" onclick="getAndDisplay()"> 

    <p id="actualText"></p> 

    <script type="text/javascript">
        function getAndDisplay(){
            //takes the input
            let link = document.getElementById('link').value; 

            //store the <div class=verse>content in a variable
            let verse = $('.verse').load('ajax/${link}');

            //store the innerHTML of the content in a variable
            let htmlContent = verse.innerHTML;

            //display the content in a <p>
            document.getElementById("actualText").innerHTML = htmlContent; 
        }

         
    </script>
</body>
</html>

I've already tried with jquery but I couldn't figure out how to solve this problem.

The link that I'm using to do the tests is this https://my.bible.com/it/bible/59/GEN.1.ESV

I'm trying to take all those verses and display just the text (maybe later I will do some style with CSS)

Upvotes: 0

Views: 135

Answers (1)

PatricNox
PatricNox

Reputation: 3928

I believe what you're looking for could be something like this:

  $( "#actualText" ).load(`ajax/${link} div.verse`);
  1. ${link} is called a "template literal" and requires the " ` " sign
  2. The target id in the jquery constructor should probably be the target of where you want the output to go.
  3. The div.verse is the "selector" argument, as read in https://api.jquery.com/load/

Upvotes: 1

Related Questions