1
Hello, I have a function in Javascript using DOM to create a page and then
I intend to view this page on container and for this the visualized data would have to be just the intended and only that container does not make a clearto delete the content as shown in figura 2.
have this figura 1, shows the first page created, source view HTML element placed on the page using DOM - Javascript
and when I select the pisoand I intend to visualize the contents through the button view Floor and I have the event script
/**
* Função para visualizar dados no piso
*
*/
Consola.prototype.onVerClick = function (event) {
this.pisos.forEach(function (piso, indice) {
if ((piso.selected) &&
(piso instanceof Piso)) {
//chama a função
piso.criarCompartimento();
}
});
}
and I intend to view this page within it container, as shown at figura 2
to função was implemented in this script
/**
* Função para criar compartimento
*/
Piso.prototype.criarCompartimento = function () {
var h1 = document.createElement("h1")
h1.style.color = "#ff0000";
h1.style.textAlign = "center";
var textoPiso = document.createTextNode("Piso " + this.id);
h1.appendChild(textoPiso);
var h2 = document.createElement("h2")
h2.style.color = "#0000ff";
h2.style.textAlign = "center";
var textoCompartimentos = document.createTextNode("Compartimentos:");
h2.appendChild(document.createElement("br"));
h2.appendChild(textoCompartimentos);
var btnCriar = document.createElement("button");
var btnCriarText = document.createTextNode("Criar");
btnCriar.appendChild(btnCriarText);
var btnApagar = document.createElement("button");
var btnApagarText = document.createTextNode("Apagar");
btnApagar.appendChild(btnApagarText);
var btnSistemaDom = document.createElement("button");
var btnSistemaDomText = document.createTextNode("Sistema Domótico");
btnSistemaDom.appendChild(btnSistemaDomText);
container.appendChild(h1); //adicionar itens ao container
container.appendChild(h2);
container.appendChild(btnCriar);
container.appendChild(btnApagar);
container.appendChild(btnSistemaDom);
}
and I was able to do it just like this, as shown by figura 3
and another question also arose is that if I intend to return to container leading consola 1, it is possible without losing the data, for this I will have to create a newfunção, or create a evento to a new button retroceder or there is another solution?
the ultimate goal is to reach at least this structure, as shown in figura 4, some pages have already been implemented separately and only need to synchronize
I believe that the simplest in your case is to open a dialog that allows you to enter this data.
– Tobias Mesquita
And just as I suggested in your other question, avoid manipulating DOM to assemble the layout. Instead set a template on your page and clone it, make this also the Compartments.
– Tobias Mesquita
in fact, I have to follow the statement -> Use the methods of
DOM (document.createElementanddocument.createTextNode)to create the elements needed for the page. Place them on the page, throughappendChildand remove them throughremoveChild. Use of property, non-standard, innerHTML is not allowed.– Renata P Souza
the dialog to enter data will open when I click on
button criar– Renata P Souza
I intend only the transition
consola 1forpisoselected, without the data of theconsola 1appear, as shown infigura 2– Renata P Souza
and if possible the
transição inversain case I click on abutton retrocederforconsola, sanefunçõeswhich I intend to implement and I know how to do but only need access to the intended content– Renata P Souza
on the
compartimentosandequipamentosboth will be implemented the same logic in which theconsolaswith thepisos, just need to access a newcontainerwith thepisoselected so I can call thefunções, container->console->floor– Renata P Souza
the page
index.htmlshall contain onlycontainerto createconsola e pisoshow it was implemented in the other question and after that we will have to usefunçõesinJavascriptto place the entries on the page and on phase 2 of this project will be drawn up inAsp.Net MVC + Ajax, so I use more theDOMto generate thepáginathrough the elements placed.– Renata P Souza
I’m curious what you mean "property, non-standard, innerHTML"... as well as non-standard?
– Sergio
@Sergio, I think the AP didn’t understand the method I suggested, it doesn’t make use of innerHTML to create the elements, on the contrary, it makes use of the
var node = document.importNode(template.content, true), that is, creates a newHTMLElementcloning aFragmentDocument, in order to avoid a reflow of html, thus obtaining a performance similar todocument.createElementand a huge gain inlegibilidade, and yet we’re using "DOM".– Tobias Mesquita