(JavaScript) お手軽にHTMLページを動的に書き換える

作ったもの

　JavaScript で DOM というものを使えば、HTML を動的に書き換えることができますが。毎回 document.getElementById( ) を使うのもタイプ数が多いので、短く書ける関数を作りました。

コード

<script>
/// 指定した id のタグの内部 HTML を html に変更する
function setHTML(html, id){
	if(!id) document.body.innerHTML = html; // id の指定がなければ body 全体
	else document.getElementById(id).innerHTML = html;
}
/// 指定した id タグの内部 HTML を取得する
function getHTML(id){
	if(!id) return document.body.innerHTML; // id の指定がなければ body 全体
	else return document.getElementById(id).innerHTML;
}
</script>

使い方

function nijuMaru(){ // ページの。を全て◎にしてしまう
	let newhtml = getHTML("container").split("。").join("◎");
	setHTML(newhtml, "container");
}
<button type="button" onclick="nijuMaru();">。を◎にするボタン</button>

実行例

。を◎にするボタン

解説

　この「はてなブログ」は、記事の div 要素の id が "container" なので、 getHTML("container"); で記事を取得できます。句点を◎に置き換えて、 setHTML で書き戻します。
　これを応用すれば、ページにルビを振ったりすることもできそうです。