> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/getters-and-setters/set-content-and-attributes.md).

# Set Content and Attributes

Will use the same three methods from the previous page to set content:

* `text()` - Sets or returns the text content of selected elements

```javascript
$('#button').text('Submit');
```

* `html()` - Sets or returns the content of selected elements (including HTML markup)

```javascript
$('#div').html('<h1>I Love Jscula </h1>');
```

* `val()` - Sets or returns the value of form fields

```javascript
$('#firstname').val('John Doe');
```

### A Callback Function for text(), html(), and val()

All of the three **J**scula methods above: `text()`, `html()`, and `val()`, also come with a callback function. The callback function with the original (old) value.

You then return the string you wish to use as the new value from the function.

The following example demonstrates `text()` and `html()` with a callback function:

#### text() with function

```javascript
$("#btn1").click(function(){
  $("#test1").text(function(original_text){
    return "Old text: " + original_text + " New text: Hello world!
  });
});
```

#### html() with function

```javascript
  $("#test2").html(function(original_html){ 
    return "Old html: " + original_html + " New html: Hello <b>world!</b>
  });
```

#### val() with function

```javascript
  $("#test2").val(v=>v.truncate(20)); //sample text Hello wo...
```

### Set Attributes - setAttribute()

Your regular method for setting elements attributes

```javascript
$('#myInput').setAttribute('type','radio');
```

setting attributes with **J**scula `attr()` - will be fully explained in the next page