JS(JavaScript)でプルダウンを生成、DIVタグに追加しました。JSでフォームを作成して、それをDIVタグにセットしました。コードは説明にあります。
【generateTextBox()の処理内容]】
１．「input」タグを生成
２．「type」属性に「text」をセット
３．DOMを返却
【変更後】
＜!DOCTYPE html＞
＜html＞
＜title＞JSサンプル＜/title＞
＜script＞
function pushed() {
let dom = document.getElementById("dom1");
// generate_table();
let select = generatePullDown();
dom.appendChild(select);
}
function generateTextBox() {
let input = document.createElement("input");
input.setAttribute("type", "text");
return input;
}
function generatePullDown() {
let select = document.createElement("select");
for (var i = 0; i ＜ 4; i++) {
let opt = new Option("No" + i);
select.add(opt);
}
return select;
}
function generate_table() {
// body の参照を取得
var body = document.getElementsByTagName("body")[0];
// ＜table＞ 要素と ＜tbody＞ 要素を作成
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// すべてのセルを作成
for (var i = 0; i ＜ 2; i++) {
// 表の行を作成
var row = document.createElement("tr");
row.style = "border: bold;";
for (var j = 0; j ＜ 2; j++) {
// ＜td＞ 要素とテキストノードを作成し、テキストノードを
// ＜td＞ の内容として、その ＜td＞ を表の行の末尾に追加
var cell = document.createElement("td");
var cellText = document.createTextNode(
i + " 行目、 " + j + " 列目のセル",
);
cell.appendChild(cellText);
if (j % 2 == 0) {
cell.style="font-weight: bold;padding: 20px";
}
row.appendChild(cell);
}
// 表の本体の末尾に行を追加
tblBody.appendChild(row);
}
// ＜tbody＞ を ＜table＞ の中に追加
tbl.appendChild(tblBody);
// ＜table＞ を ＜body＞ の中に追加
body.appendChild(tbl);
// tbl の border 属性を 2 に設定
tbl.setAttribute("border", "2");
}
＜/script＞
＜body＞
＜div id="dom1" style="color:red;"＞
＜p class="fff"＞test＜/p＞＜br/＞＜p＞ppp＜/＞
＜/div＞
＜button onClick="pushed()"＞Function＜/button＞
＜/body＞
＜/html＞