Convert jquery object to html DOM

Asked

Viewed 65 times

0

I have the following code:

var valuePlan = variavel > 0 ? $('<a>').attr({
                                            target: '_blank',
                                            href: 'file.php'
                                           }).append( m.plan ) : ''

In the code above, I check if the variable is greater than zero, then mount a link, otherwise it is empty

If it’s bigger than zero, I’d like to know how to show in html as url

I tried to do it like this 

  html( valuePlan  )

But it makes the following mistake: 

Uncaught ReferenceError: html

I would like the above object to become a normal link within a td that was added via javascript:

Example:

<table>
  <thead>
    <th>Titulo</th>
  </thead>
  <tbody class="tbody">
  </tbody>
</table>

<script>
  var variavel = 1
  var valuePlan = variavel > 0 ? $('<a>').attr({
                                                target: '_blank',
                                                href: 'file.php'
                                               }).append( m.plan ) : ''
  var cell = "<td>"+valuePlan+"</td>"
  $('.tbody).find('tr').remove()
  $('.tbody').append( cell )
</script>
html jquery

1 answer

1

So I guess what you’re trying to do is add the element to the page.

To do this you can use the .append as you did in your element <a>, only this time with an item that is already on the page.

Example: Let’s say you want to add on your own <body> then you could use something like the code below:

/// ; Como valuePlan pode ser uma string vazia vou fazer uma verificação antes
/// ;  para garantir que é um elemento jQuery
if( valuePlan instanceof jQuery )
    $("body").append( valuePlan )

Editing, example using as base your code.

var variavel = 1
var valuePlan = variavel > 0 ? $('<a>').attr({
       target: '_blank',
       href: 'file.php'
      }).append( "TESTE" ) : '';
      

var tbody = $('.tbody');

tbody.find("tr").remove();
    
   
var td = $("<td>")    /// cria TD
    .append( valuePlan ); /// adiciona A
    
var tr = $("<tr>") /// criar TR
      .append( td ); /// adiciona TD
      
tbody.append( tr ); /// adiciona TR ao tbody
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Titulo</th>
  </thead>
  <tbody class="tbody">
    
  </tbody>
</table>

Another example, using a single class in td

var variavel = 1
var valuePlan = variavel > 0 ? $('<a>').attr({
       target: '_blank',
       href: 'file.php'
      }).append( "TESTE" ) : '';
      

var tbody = $('.tbody');


tbody.find("td.vai-receber-anchor") /// procura pela TD
   .html("") /// limpa a TD
   .append( valuePlan ); /// adiciona o valuePlan na TD
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <th>Titulo</th>
  </thead>
  <tbody class="tbody">
    <tr>
        <td class='vai-receber-anchor'></td>
    </tr>
  </tbody>
</table>

  • I actually want to add to a table cell via javascript. Ex "<TD>"+valueplan+"</TD>"

  • So the method remains the same (.append), what you have to do is change the jQuery selector, in the example I put the "body", how do you want to use in a TD you will have to make the selector so that comes to this TD, or prepare her for it Ex. add the class "vai-receber-ahref" in TD and the jQuery selector would look like this: $("TD.vai-receber-ahre") now just use the append same as the example

  • I edited the question, sorry I wasn’t clear

  • So it’s only possible through one element of the gift, right?

  • I didn’t understand this last question right. -- To add to the page you need to add to an element already on the page. Now create you could create ate as string Ex. $("TD").append( "<a href='index.php'>Meu Link</a>" ), Obs. in this case could use up to the .html( str ) instead of .append( str )

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.