Javascript - Como Criar uma div dentro de outra div com um botão dentro?

Front-end
#1

preciso criar uma div dentro de outra div com um botão dentro…
alguém pode me ajudar?

#2

Javascript puro? jQuery? Algum framework?

#3

javascript puro!
estou tentando fazer assim não não dá certo. :confused:

function teste(){
	var box = document.getElementsByClassName("HTMLTabContainer");
	document.getElementsByClassName(box).innerHTML = "<div><button>teste</button></div>"


};
#4

Quando você faz isso:

Vocẽ está criando um vetor de elementos, mesmo que seja apenas um, é um vetor de 1 posição.
Aí, você faz isso

Ou seja, tenta inserir algo num vetor, sério mesmo?
Decida-se ou você faz

box[0].innerHTML = "<div><button>teste</button></div>";

Ou

document.getElementsByClassName("HTMLTabContainer")[0].innerHTML  =  "<div><button>teste</button></div>";
#5

sou muito noob em javascript. o que eu preciso é inserir essa div e o botão dentro dessa div
o objetivo é deiar um do lado do outro… eu executei o código acima ele acabou sobrescrevendo o que estava sendo exibido antes.
/

image
image.png737×125 2.72 KB

#6

Estude

Sim, innerHTML captura/substitui tudo o que você tem de html dentro de uma div.

#7

como eu faria para criar sem sobrescrever ?
tentei isso mas nada:/

document.getElementsByClassName("HTMLTabContainer")[0].createElement="<div><button>teste</button></div>"
#8

estou fazendo dessa forma, porém quando tento obter a class da div que foi criado ele não encontra.

var div = document.createElement("div");
div.setAttribute('class', 'divBtn');
document.getElementsByClassName('HTMLTabContainer').appendChild=div;

var botao = document.createElement("button");
 
botao.setAttribute('id', 'teste');
document.getElementsByClassName('divBtn').appendChild(botao);
#9

conseguir resolver!!

var $contro = document.querySelector('.HTMLTabController'),
    // Pega a string do conteúdo atual
    HTMLTemporario = $contro.innerHTML,
    // Novo HTML que será inserido
    HTMLNovo = '<button>testealex </button>';

// Concatena as strings colocando o novoHTML antes do HTMLTemporario
HTMLTemporario = HTMLNovo + HTMLTemporario;

// Coloca a nova string(que é o HTML) no DOM
$contro.innerHTML = HTMLTemporario;
#10

Esse é um caminho.