javascript - HTML マークアップを見ると、属性に別の名前が付けられているようです

Question

HTMLドキュメントに追加したカスタム属性があり、それに応じてページの上部で定義しました。

私を混乱させるのは、オブジェクトに割り当てても、オブジェクトが作成されると、完全に小文字になることです。理由はわかりません。以下の例:

var inputControlType = ""
var n = $("<div class = 'draggable' style='position:absolute;'>");
n.attr("id", "layer" + $('div#divControls').children().length + "new");
n.hide();
inputControlType = "checkbox";
var inputControls = $("<input type = '" + inputControlType + "' />");
inputControls.attr("id", "el" + $('#divControls').children().length + "new");
inputControls.attr("disabled", "true");
inputControls.css("font-family", "Microsoft Sans Serif");
inputControls.css("font-size", "12pt");
n.attr("elType", "3");
n.html("<span>" + inputControls.clone().wrap('<p>').parent().html() + "<label for='" + $('div#divControls').children().length + "new' style='font-size: 12pt; font-family: Microsoft Sans Serif;'>Default Text</label></span>").appendTo($("#divControls"));

上記のコードでは --n.attr("elType","3");-- と表示されていますが、マークアップで調べると eltype="3" です。elType が定義されていないため、これは適切ではありません。

マークアップ:

<div style="left: 665px; top: 183px; display: block; position: absolute; cursor: move; background-color: pink;" id="layer37new" class="draggable ui-draggable" context="menuOne" menuid="el37new" eltype="3">
  <span>
    <input style="font-family: Microsoft Sans Serif; font-size: 12pt; cursor: move;" id="el37new" disabled="disabled" value="on" type="checkbox" context="menuOne" menuid="el37new">
    <label style="font-family: Microsoft Sans Serif; font-size: 12pt;" for="37new">
      Default Text
    </label>
  </span>
</div>

elType の代わりに eltype を出力するような何か間違ったことをしましたか? また、いいえ、属性の参照を elType から eltype に変更することは有効な答えではありません。なぜそれが書かれたように動作しないのか理解できません。