JavaScript Object extend div

Question

Как я привык к этому с помощью Java Swing, я попытался создать объект JavaScript, который можно добавить в сам документ. Это должно выглядеть примерно так:

var customDiv = new MyDiv(); 
document.appendChild(customDiv); 

В конструкторе объекта я хотел бы попробовать что-то вроде

function MyDiv() { 
    this.innerHTML = "test"; 
} 

и другой материал для объекта.

Возможно ли создать веб-сайты таким образом, как это с помощью JavaScript или как вы решаете такие проблемы?

(Я хотел бы создать элементы, которые являются объектом и делать все сами, как ручки прослушиватели событий и которые могут быть добавлены в документ.)

Answer 1

Вы можете, но подобно тому, как методы свинга Java принимают JPanel s или другие компоненты Swing, такая функция, как appendChild, принимает объекты Node. Вы отправляете функцию в appendChild, и как она будет знать, как ее принять?

Примеры создания веб-сайтов, как вы описали:

var myDiv = document.createElement('div'); 
 
myDiv.id = "mydiv"; 
 
var myTextbox = document.createElement('input'); 
 
myTextbox.type = 'text'; 
 
myTextbox.value = 'some value'; 
 
myDiv.appendChild(myTextbox); 
 
document.body.appendChild(myDiv);

Таким образом, вы создаете отдельные элементы DOM и имеют ссылки на них, похожий на создание экземпляра компонентов Swing. Эти элементы могут быть такими, как div s, которые могут использоваться аналогично JPanel s или input, аналогичным JTextField. И затем вы используете эти ссылки, чтобы объединить их вместе для создания графического интерфейса.

Чтобы попытаться проиллюстрировать, как работает document.createElement, как вы, кажется, все еще запутались в комментариях, сравните его с методом Java, подобным этому (Just FYI, это может быть не строго точно, поскольку я не использовал Swing через некоторое время):

JComponent createComponent(string componentType) { 
    if(componentType.equals("JTextField")) { 
     return new JTextField(10); 
    } else if(componentType.equals("JFileChooser")) { 
     // return filechooser 
    } 
    //etc. 
} 

Как вы можете видеть, вызов метода createComponent, а также предоставление ему строковое значение того, что компонент вы хотите, возвращается к вам фактический инстанцированный пустой компонент. Вы не определили никаких конструкторов. Вместо этого вы размещаете ссылку на нее и делаете с ней все, что хотите.