Код :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>asd</title>
</head>
<body>
<input type="button" id="clean" value="Clean">
<input type="button" id="myInput" value="Click Me">
<input type="text" id="tIn">
<div id="result"></div>
<script>
var clean = document.getElementById("clean");
var myInput = document.getElementById("myInput");
var tIn = document.getElementById("tIn");
var result = document.getElementById("result");
var resultFragment = document.createDocumentFragment();
var wordObj = {};
clean.onclick = function(){ //Очистка поля ввода при клике на кнопку clean.
tIn.value = "";
}
myInput.onclick = function() {
wordObj = {};
var textIn = tIn.value;
var textLength = textIn.length;
for (var i = 0; i <= textLength - 1; i++) {
var charWord = textIn.charCodeAt(i);
if(wordObj[charWord] >= 0){
wordObj[charWord] = wordObj[charWord] + 1;
} else{
wordObj[charWord] = 0;
wordObj[charWord] = wordObj[charWord] + 1;
};
};
for (var key in wordObj) {
var theP = document.createElement("p")
theP.innerHTML = String.fromCharCode(key) + " = " + wordObj[key];
resultFragment.appendChild(theP);
};
result.innerHTML = resultFragment;
};
</script>
</body>
</html>
По идее должно было вывести кол-во определённой буквы из слова которое вписали в поле.
Пример: ввели слово "hi" , а ниже вывелось -
h = 1
i = 1
В данном случае выводится [object DocumentFragment]
А если поменять result.innerHTML = resultFragment; на result.appendChild(resultFragment);
выводится всё как задумано . В чём дело? Какая разница между ними в данном случае?
