How do I get the entire HTML of the last Fieldset in a dynamic page?

Question

How do I get the entire HTML of the last Fieldset in a dynamic page?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

2

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

Thedivcontentisdynamicandmayhave3ormorefieldsets.InmycodeIcouldonlygetthecontentthatisinsidethefirstone.HowcanIgetthewholefieldset?

Hereisthecodeformypage:

<html><head><title></title></head><body><h3>MultiplosFieldsets</h3><br><divid="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's the script:

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

javascript html dom

asked by anonymous 29.12.2016 / 15:19

4 answers

1

Html be what you have .:

<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>

O 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 Dynamic Blocks DIV.

29.12.2016 / 15:47

1

You get all children of the Dynamic Blocks element and concatenate the contents of those 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>

29.12.2016 / 15:26

1

The entire fieldset:

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

n = []

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

The last:

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

19.04.2018 / 15:41

Login system in ASP.NET mvc Doubt to remove JavaScript attributes

score 2 · Accepted Answer

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

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 all the fieldset you can do 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>