How to get the entire HTML of the last Fieldset into a dynamic page?

Asked

Viewed 177 times

2

I have a div where multiple are added fieldsets and just below a hr:

inserir a descrição da imagem aqui

The content of div is dynamic and may have 3 or more fieldsets. In my code I could only get the contents inside the first. How can I take the whole fieldset?

Here’s the code from my page:

<html>
    <head><title></title></head>
    <body>
        <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>            
    </body>
</html>

And here the script:

document.getElementById("CopiaUltimoConteudo").innerHTML = 
         document.getElementById("BlocosDinamicos").querySelector("fieldset").innerHTML;
javascript html dom

4 answers

2


If you want to use only the last fieldset you can use :last-child thus:

var fieldset = document.querySelector('#BlocosDinamicos fieldset:last-child');
document.getElementById("CopiaUltimoConteudo").innerHTML = fieldset.innerHTML;
    <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>

If you want every fieldset you can do it like this:

var fieldsets = document.querySelectorAll('#BlocosDinamicos fieldset');
document.getElementById("CopiaUltimoConteudo").innerHTML = [].map.call(fieldsets, function(el){ return el.innerHTML}).join('');
    <h3>Multiplos Fieldsets</h3>
        <br>
        <div id="BlocosDinamicos">
            <fieldset><legend></legend>
                <p>Conteudo 1</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 2</p>
            </fieldset>
            <fieldset><legend></legend> 
                <p>Conteudo 3</p>
            </fieldset>
        </div>
        <hr />
        <div id="CopiaUltimoConteudo"></div>

  • 1

    Good answer. I think the first point would be better if it stayed var fieldset = Document.querySelector('#Blockdynamics fieldset:last-Child'); because if there are multiple Ivs with fieldset it will stop at the first

  • @Tiagogomes yes, true. I will add to the answer to clarify. Thank you.

  • 1

    Perfect! Thank you @Sergio! D

1

You get all the children of the element Blocking and concatenate the contents of those who are fieldset:

var fildsets = document.querySelectorAll('#BlocosDinamicos fieldset');

var content = [].map.call(fildsets, fieldset => fieldset.innerHTML).join('');

document.getElementById("CopiaUltimoConteudo").innerHTML = content;
<h3>Multiplos Fieldsets</h3>
<br>
<div id="BlocosDinamicos">
  <fieldset>
    <legend></legend>
    <p>Conteudo 1</p>
  </fieldset>
  <fieldset>
    <legend></legend>
    <p>Conteudo 2</p>
  </fieldset>
  <fieldset>
    <legend></legend>
    <p>Conteudo 3</p>
  </fieldset>
</div>
<hr />
<div id="CopiaUltimoConteudo"></div>

  • 2

    Lucas, you can select the Fields with a document.querySelectorAll('#BlocosDinamicos fieldset'), making a map on them returning their innerHTML and doing the .join(''), at the end, passing as "text". Accept the suggestion? https://jsfiddle.net/e5bts285/

  • Of course @Samirbraga! I liked it, this way is more optimized. Thank you very much :)

1

html to be what Voce has.:

<html>
<head><title></title></head>
<body>
    <h3>Multiplos Fieldsets</h3>
    <br>
    <div id="BlocosDinamicos">
        <fieldset><legend></legend>
            <p>Conteudo 1</p>
        </fieldset>
        <fieldset><legend></legend> 
            <p>Conteudo 2</p>
        </fieldset>
        <fieldset><legend></legend> 
            <p>Conteudo 3</p>
        </fieldset>
    </div>
    <hr />
    <div id="CopiaUltimoConteudo"></div>            
</body>

The javascript.:

var obj = document.getElementById("BlocosDinamicos");
document.getElementById("CopiaUltimoConteudo").innerHTML = obj.getElementsByTagName('fieldset')[obj.getElementsByTagName('fieldset').length-1].innerHTML;

This javascript will pick up the last fieldset element within the DIV Blocosdinamicos.

1

All the fieldset: 

var fieldsets = document.querySelectorAll('#BlocosDinamicos')

n = []

fieldsets.forEach(element => {
  n.push(element.innerHTML);
  });

The last:

document.querySelector('#BlocosDinamicos').lastChild;

Browser other questions tagged javascript html dom

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