戻る

HTMLタグの出力

HTMLタグを出力する方法

上記サンプルはdivタグの中にjavascriptで出力したタグが含まれています。
このようにjavascriptで任意のタグを出力できます。

element.insertAdjacentHTML(position, text)

beforebegin	elementの前に追加
afterbegin	elementの子要素の先頭に追加
beforeend	elementの子要素の最後に追加
afterend	elementの後に追加

(例)
'<p style="background-color:rgb(245 255 250 / 1.0);text-align:center;">sample</p>'
getElementByIdで指定したオブジェクトのノードに
指定した位置に出力したい文字列を追加します。
(例)
copy

let element = document.getElementById('xxx');
element.insertAdjacentHTML('beforebegin', '<p>sample</p>');

上記のサンプルを次のように実装しています。
(例)
divタグを準備して
広告のような宣伝タグを表示したい例

[divタグの例]
<div id="ad"> </div>
copy

loadAd();
function loadAd()
{
	const parent = document.getElementById('ad');
	parent.insertAdjacentHTML('afterbegin', ad());
}
function ad()
{
	let path="画像パスを設定します";// ex.) path="img/";
	let fileID="soco-st_sample4.png";
	let text="ソコスト";
	let url="https://soco-st.com";
	let memo="ソコストさんのイラストはこちら";
	let html="";
	html += "<table>";
	html += "<tr>";
	html += "<td>";
	html += "<img src=" + path + fileID + " style='max-width:50px;max-height:50px;'>";
	html += "</td>";
	html += "<td>";
	html += "<label>" + text + "</label>";
	html += "</td>";
	html += "</tr>";
	html += "<tr>";
	html += "<td>";
	html += "[URL]";
	html += "</td>";
	html += "<td style='word-break:break-all'>";
	html += "<a href='" + url + "' TARGET='_blank'>" + text + "</a>";
	html += "</td>";
	html += "</tr>";
	html += "</table>";

	return html;
}

現在、HTMLに関する仕様を定めている「HTML Living standard」では、このメソッドの使用について推奨していません。
8.4.3 document.write()
URL [クリックすると開きます])

「ソコスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]ソコスト

URL[https://soco-st.com][クリックすると開きます])

戻る

back

Outputting HTML tags

How to output HTML tags

The above sample contains a tag output by javascript inside the div tag.
You can output any tag with javascript like this.

element.insertAdjacentHTML(position, text)

beforebegin	Add before element
afterbegin	Add to the beginning of the child elements of element
beforeend	Add to the end of element's children
afterend	Add after element

ex.)
'<p style="background-color:rgb(245 255 250 / 1.0);text-align:center;">sample</p>'
Add the string you want to include to the specified position in the node of the object specified by getElementById.
(Example)
copy

let element = document.getElementById('xxx');
element.insertAdjacentHTML('beforebegin', '<p>sample</p>');

The above sample is implemented as follows.
(Example)
Prepare a div tag
An example of displaying promotional tags like advertisements

[Example of div tag]
<div id="ad"> </div>
copy

loadAd();
function loadAd()
{
	const parent = document.getElementById('ad');
	parent.insertAdjacentHTML('afterbegin', ad());
}
function ad()
{
	let path="Set the image path";// ex.) path="img/";
	let fileID="soco-st_sample4.png";
	let text="soco-st.com";
	let url="https://soco-st.com";
	let memo="Check out soco-st.com's illustrations here";
	let html="";
	html += "<table>";
	html += "<tr>";
	html += "<td>";
	html += "<img src=" + path + fileID + " style='max-width:50px;max-height:50px;'>";
	html += "</td>";
	html += "<td>";
	html += "<label>" + text + "</label>";
	html += "</td>";
	html += "</tr>";
	html += "<tr>";
	html += "<td>";
	html += "[URL]";
	html += "</td>";
	html += "<td style='word-break:break-all'>";
	html += "<a href='" + url + "' TARGET='_blank'>" + text + "</a>";
	html += "</td>";
	html += "</tr>";
	html += "</table>";

	return html;
}

Currently, then HTML Living Standard does not recommend using this method.
8.4.3 document.write()
URL [click to open the homepage])

the images used are from "illustration by soco-st.com"
Thank you very much.

[URL]soco-st.com

URL[https://soco-st.com][click to open the homepage])

back