Question 236659 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to process an html element containing a template text with jQuery

usually I use the following form of code to display html elements with their data

<div id="parent">
  <span>loading...</span>
</div>

<script>
var data="im data";
$("#parent").html(`<span>${data}</span>`);
</script>

but it is very inconvenient I have to write the span element twice and it will be very inconvenient if there are elements that need to be changed, so I want to fetch the element first instead of writing it back

so I want to fetch the element first instead of writing it back,
and code look like this

<div id="parent">
  <span>${data}</span>
</div>

<script>
var data="im data";

$("#parent").html($("#parent").html());

// it displayed ${data} not im data
</script>

but it doesn’t produce as I expected

Tags:

2

Answers


  1. 0

    In your code you are writing

    <div id="parent">
  <span>${data}</span>
</div>

    in your html file which will show as normal text

    if you want to show some data in the span instead of ${data}

    you can use

    <script>
var data="im data";

$("#parent span").text(data);

// it will display im data
</script>

    and if you want to fetch the html first then use

    var data = $("#parent").html(); // it will fetch <span>im data</span>
var dataOnly = $("parent span").text(); // it will fetch im data

$("#parent").html(data); // it will output the same
$("#parent").text(dataOnly); //it will make your html <div id="parent">im data</div>

// if you want to change the data inside span the try
$("#parent span").text("you custom text"); // to show text in the span
$("#parent").html("you custom html"); // to change the html of the parent div

    if you want to add more data in your parent div then

    var span = $('<span />').html('new data');
$("#parent").append(span);

    i think this will help to understand how jquery works

    Login or Signup to reply.
  2. 0

    Here is a way of setting up a very simple templating engine:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <span>This is ${data}. And here it is again: "${data}"!</span>
And here is stuff outside the span element: ${other}
</div>
<script>
  const D={data:"the actual content",other:"another value"};
  $("#parent").html($("#parent").html().replace(/${([^}]+)}/g,(_,n)=>D[n]));
</script>

    However, it is not capable of nesting ${...} elements and can only reference simple values from a given object D.

    The action is mainly done by a .replace callback function. The second argument n of that function contains the content of the first search group and this is then used to look up the actual content from D.

    There is another way of doing it using eval(), although this is usually shunned by the JavaScript programming community for "security reasons". eval() will evaluate everything it is given as an argument, so this might incriminate the security and integrity of your page. Make up you own mind about it.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  <span>This is ${data}. And here it is again: "${data}"!</span>
And here is stuff outside the span element: ${other} and even a little calculation: 2+2=${2+2}.
</div>
<script>
  const data="the actual content",other="another value";
  $("#parent").html(eval("`"+$("#parent").html()+"`"));
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search