【JS】DOM ～ 基本編 / オブジェクト作成 ～

JavaScript

■ はじめに

https://dk521123.hatenablog.com/entry/2011/01/07/012520

の続き。
「２）オブジェクト作成系」を掘り下げる

目次

【１】createElement()
【２】createTextNode()

【１】createElement()

* 指定タグでの要素のオブジェクト作成

１）サンプル

例１：Hello world 

<html>
<head>
<title>サンプル</title>
<script type="text/javascript">
function sample()
{
    var objTextarea = document.createElement("textarea");
    objTextarea.value = "ほらね！";
    objTextarea.rows = "5";
    objTextarea.cols = "20";
    objTextarea.style.backgroundColor = 'red';
    
    var objBr = document.createElement("br");
    
    var objBody = document.getElementsByTagName("body").item(0);
    objBody.appendChild(objBr);
    objBody.appendChild(objTextarea);
}
</script>
</head>
<body>
<button onclick="sample()">赤いTextAreaが現れるよ</button>
</body>
</html>

例２：inputを自動で追加 

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<form id="mainForm">
  <div id="div0">
    <input id="itemName0" name="itemName0" type="text" maxlength="5" size="10">
  </div>
</form>
</body>
<script>
var index = 0;
function addRow() {
  index = index + 1;

  const newDiv = document.createElement("div");
  newDiv.setAttribute("id", `div{index}`);
  
  const newInput = document.createElement("input");
  newInput.setAttribute("id", `itemName{index}`);
  newInput.setAttribute("type", "text");
  newInput.setAttribute("maxlength", "5");
  newInput.setAttribute("size", "10");
  newInput.setAttribute("value", "");
  newInput.addEventListener('blur', addRow);

  const mainForm = document.getElementById("mainForm");
  mainForm.appendChild(newDiv);
  newDiv.appendChild(newInput);
}

const inputText = document.getElementById("itemName0");
inputText.addEventListener('blur', addRow);
</script>
<html>

【２】createTextNode()

* 文字列を追加

関連記事

DOM ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2011/01/07/012520
DOM ～ 基本編 / getElementById() ～
https://dk521123.hatenablog.com/entry/2011/12/29/200502
DOM ～ 基本編 / オブジェクト取得 ～
https://dk521123.hatenablog.com/entry/2022/11/21/000000
DOM ～ 基本編 / オブジェクト操作 ～
https://dk521123.hatenablog.com/entry/2011/01/09/155824
JavaScript覚書
https://dk521123.hatenablog.com/entry/2010/01/15/191626
動的に生成したinputタグを考える
https://dk521123.hatenablog.com/entry/2022/11/24/230044